Easy Image Zoom – Plugin jQuery – Zoomez vos images
Avec le plugin jQuery Easy Image Zoom, découvrez une autre alternative à Zoomy, et agrémentez votre site d’un effet de zoom sur vos images, idéal pour les boutiques en ligne. Un effet simple, facile à mettre en place et qui fait se qu’on lui demande.
Découvrons rapidement son utilisation :
Dans un premier temps, le script va agir sur vos éléments ainsi constitués :
[pastacode lang= »markup » manual= »%3Ca%20href%3D%22large.jpg%22%3E%3Cimg%20src%3D%22small.jpg%22%20alt%3D%22Small%20image%22%20%2F%3E%3C%2Fa%3E » message= » » highlight= » » provider= »manual »/]
Vous l’aurez compris, large.jpg est l’image originale (de grande taille) et small.jpg est l’image sur le site de taille réduite.
Ce plugin jQuery est facilement customisable et vous pouvez retoucher le css comme bon vous semble :
[pastacode lang= »css » manual= »%23easy_zoom%7B%0Awidth%3A600px%3B%0Aheight%3A400px%3B%0Aborder%3A5px%20solid%20%23eee%3B%0Abackground%3A%23fff%3B%0Acolor%3A%23333%3B%0Aposition%3Aabsolute%3B%0Atop%3A15px%3B%0Aleft%3A400px%3B%0Aoverflow%3Ahidden%3B%0A-moz-box-shadow%3A0%200%2010px%20%23555%3B%0A-webkit-box-shadow%3A0%200%2010px%20%23555%3B%0Abox-shadow%3A0%200%2010px%20%23555%3B%0A%2F*%20vertical%20and%20horizontal%20alignment%20used%20for%20preloader%20text%20*%2F%0Aline-height%3A400px%3B%0Atext-align%3Acenter%3B%0A%7D » message= » » highlight= » » provider= »manual »/]
Voici un exemple de l’implémentation du plugin :
[pastacode lang= »javascript » manual= »jQuery(function(%24)%7B%0A%0A%24(‘a.zoom’).easyZoom(%7B%0Aid%3A%20’imagezoom’%2C%0Apreload%3A%20’%0A%0ALoading%20the%20image%0A%0A’%0Aparent%3A%20’%23container’%0A%7D)%3B%0A%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]
Comme vous l’aurez deviné, le plugin agira sur tous les éléments « a » ayant la classe « zoom ». Voici les options disponibles :
id (Valeur par défaut : « easy_zoom »)
L’id du nouvel élément image créé.
parent (Valeur par défaut : « body »)
L’élément DOM qui accueillera la nouvelle image zoomée.
append (Valeur par défaut : « true »)
Si l’option vaut true le nouvel élément créé sera inséré dans le dernier enfant du parent. Si l’option vaut false l’élément de création sera dans le premier enfant de l’élément parent.
preload (Valeur par défaut : « Loading… »)
Le message de chargement de l’image zoomée, peut contenir du HTML.
error (Valeur par défaut : « There has been a problem with loading the image. »)
Le message d’erreur si le plugin rencontre un problème de chargement.
Page du plugin jQuery
Télécharger le plugin Easy Image Zoom
Une petite démonstration
Articles qui peuvent vous intéresser :
- Plupload – Le multi-upload avec du jQuery
- Zoomy – Plugin jQuery – Petit effet de zoom sur image simple et sympa
- msdropdown – Plugin jQuery – Des icones dans vos balises select/option
- Pixlr – Editeur d’images en ligne – Un photoshop sur le net ?
- FullCalendar – Plugin jQuery – Créez vos propres agendas comme Google
Trackbacks/Pingbacks