ZooMove jQuery Plugin per ingrandire le immagini su Hover
Se hai mai visitato un sito di e-commerce, probabilmente hai visto il effetto zoom dell'immagine. Si passa sopra una foto del prodotto e quella parte dell'immagine ingrandisce per a vista più chiara.
Il Plugin ZooMove è un ottimo modo per replicare questo effetto sul tuo sito. Suo powered by jQuery, così puoi farlo funzionare rapidamente senza troppo codice.
ZooMove è completamente gratuito e open source, disponibile su GitHub per eventuali sviluppatori curiosi. Può essere installato tramite npm, pergolato, Filato, o scaricato direttamente da CDNJS.
Per impostare un'immagine ZooMove, avrai bisogno tre file specifici nell'intestazione della pagina:
- jQuery
- ZooMove CSS
- ZooMove JS
Entrambi i file ZooMove può essere minimizzato se vuoi carichi di pagina più veloci. Puoi anche combinare il file CSS nel tuo foglio di stile principale se è più semplice.
Tutta la vera magia avviene nell'HTML dove puoi imposta HTML5 dati- * attributi per i diversi effetti.
Questo ti consente di creare il tuo proprio effetto zoom personalizzato basato su quattro diversi parametri:
Dati-zoo-scala- definisce il dimensione dello zoom totale quando si passa in bilico (ad esempio 2,0 per 200%)Dati-zoo-move- definisce se l'immagine si muove insieme al cursoreDati-zoo-over- definisce l'immagine ingrandita apparire sopra l'originaledati-zoo-cursore- definisce il punto del cursore
Un quinto parametro finale ti consente di definire quale nuovo URL dell'immagine dovrebbe essere (se necessario).
Puoi utilizzare ZooMove in tutti i principali browser, incluso IE9 +. Questo plugin è ampiamente supportato e offre un diavolo di esperienza utente.
Se stai cercando un semplice libreria hover-to-zoom ZooMove è una scelta eccellente. Suo abbastanza leggero per funzionare su qualsiasi sito Web ed è powered by jQuery, quindi non avrai bisogno di scrivere tanto codice per farlo funzionare.
Visita la pagina principale per vederlo in azione e consulta la documentazione su GitHub per saperne di più.
