Zoomy – Plugin jQuery – Petit effet de zoom sur image simple et sympa
Voici un petit plugin jQuery simple à mettre en place (quand on connait un minimum jQuery) et facile à utiliser. Via ce plugin nommé « Zoomy » par son auteur, vous allez pouvoir ajouter un effet de zoom sur une image de votre site internet. Effet très prisé des boutiques en ligne pour essayer de voir plus de détails sur une photo d’objet par exemple.
Pour utiliser ce plugin, la mise en place est identique à la majorité des plugins jQuery :
Appel des librairies et du css
[pastacode lang= »markup » manual= »%3Clink%20type%3D%22text%2Fcss%22%20rel%3D%22stylesheet%22%20href%3D%22path-to%2Fzoom1.0.css%22%2F%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.4.2%2Fjquery.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22path-to%2Fzoomy1.0.js.%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
Le ou les éléments cibles :
[pastacode lang= »markup » manual= »%3Ca%20class%3D%22zoom%22%20href%3D%22zoomImg.jpg%22%3E%0A%3Cimg%20src%3D%22displayImg.jpg%22%20alt%3D%22This%20is%20the%20Display%20Image%22%20%2F%3E%0A%3C%2Fa%3E » message= » » highlight= » » provider= »manual »/]
Image originale dans le lien et image réduite à l’affichage.
Puis la mise en place de zoomy qui, dans ce cas, touchera tous les éléments de class « zoom » :
[pastacode lang= »javascript » manual= »%24(function()%7B%0A%24(‘.zoom’).zoomy()%3B%0A%7D)(jQuery) » message= » » highlight= » » provider= »manual »/]
Démonstration
Télécharger le plugin jQuery Zoomy
Articles qui peuvent vous intéresser :
Trackbacks/Pingbacks