ZooMove: jQuery Plugin per ingrandire le immagini su Hover

Se hai mai visitato un sito di e-commerce, probabilmente hai visto l' effetto di ingrandimento dell'immagine . Si passa sopra una foto del prodotto e quella parte dell'immagine si ingrandisce per una visione più chiara .

Il plugin ZooMove è un ottimo modo per replicare questo effetto sul tuo sito. È alimentato da jQuery, quindi puoi farlo funzionare rapidamente senza molto codice.

ZooMove è completamente gratuito e open source, disponibile su GitHub per tutti gli sviluppatori curiosi. Può essere installato tramite npm, Bower, Yarn o scaricato direttamente da CDNJS .

Per impostare un'immagine ZooMove, avrai bisogno di tre file specifici nell'intestazione della pagina:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Entrambi i file ZooMove possono essere ridotti se si desidera un caricamento più veloce della pagina. Puoi anche combinare il file CSS nel tuo foglio di stile principale se è più semplice.

Tutta la vera magia avviene nell'HTML in cui è possibile impostare gli data-* attributes HTML5 data-* attributes per i diversi effetti.

Ciò ti consente di creare il tuo effetto zoom personalizzato basato su quattro diversi parametri:

1. data-zoo-scale - definisce la dimensione totale dello zoom quando si passa il mouse (ad es. 2.0 per 200%)
2. data-zoo-move - definisce se l'immagine si muove insieme al cursore
3. data-zoo-over : definisce l'immagine ingrandita sopra l'originale
4. data-zoo-cursor - definisce il punto del cursore

Un quinto parametro finale consente di definire quale dovrebbe essere il nuovo URL dell'immagine (se necessario).

Puoi utilizzare ZooMove in tutti i principali browser, incluso IE9 +. Questo plug-in è ampiamente supportato e offre una sola esperienza utente.

Se stai cercando una semplice libreria hover-to-zoom, ZooMove è una scelta eccellente. È abbastanza leggero da funzionare su qualsiasi sito Web ed è basato su jQuery, quindi non dovrai scrivere tanto codice per farlo funzionare.

Visita la pagina principale per vederlo in azione e consulta la documentazione su GitHub per saperne di più.