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.

zoomy

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 :

Author: Franck Pertegas

Share This Post On

Trackbacks/Pingbacks

  1. Plupload – Le multi-upload avec du jQuery | LudiBlog - [...] Zoomy – Plugin jQuery – Petit effet de zoom sur image simple et sympa [...]
  2. Easy Image Zoom – Plugin jQuery – Zoomez vos images | LudiBlog - [...] Zoomy – Plugin jQuery – Petit effet de zoom sur image simple et sympa [...]

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *