ZooMove jQuery Plugin pour zoomer des images sur le survol

Si vous avez déjà consulté un site de commerce électronique, vous avez probablement déjà vu le effet de zoom de l'image. Vous survolez une photo du produit et cette partie de l'image est agrandie pour une vue plus claire.

le ZooMove plugin est un excellent moyen de reproduire cet effet sur votre site. Ses propulsé par jQuery, afin que vous puissiez le mettre en place rapidement sans trop de code.

ZooMove est totalement gratuit et open source, disponible sur GitHub pour les développeurs curieux. Il peut être installé via npm, Tonnelle, Fil, ou téléchargé directement à partir de CDNJS.

Pour configurer une image ZooMove, vous aurez besoin de trois fichiers spécifiques dans l'en-tête de votre page:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Les deux fichiers ZooMove peut être minifiée si vous voulez des chargements de page plus rapides. Vous pouvez également combiner le fichier CSS dans votre feuille de style principale si cela est plus facile..

Toute la magie se passe dans le HTML où vous pouvez définir HTML5 attributs data- * pour les différents effets.

Cela vous permet de fabriquer votre propre effet de zoom personnalisé basé sur quatre paramètres différents:

1. data-zoo-scale - définit le taille totale du zoom en vol stationnaire (par exemple 2,0 pour 200%)
2. data-zoo-move - définit si l'image se déplace avec le curseur
3. data-zoo-over - définit l'image agrandie apparaître sur l'original
4. curseur de données-zoo - définit le point du curseur

Un cinquième paramètre final vous permet de définir ce que le nouvelle image URL devrait être (si nécessaire).

Vous pouvez utiliser ZooMove dans tous les principaux navigateurs, y compris IE9 +. Ce plugin est largement soutenu et il offre une sacrée expérience utilisateur.

Si vous cherchez un bibliothèque de survol simple ZooMove est un excellent choix. Ses assez léger pour exécuter sur n'importe quel site Web et il est propulsé par jQuery, vous n'aurez donc pas besoin d'écrire autant de code pour le faire fonctionner.

Visitez la page principale pour le voir en action et consultez la documentation sur GitHub pour en savoir plus..