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.

Easy Image Zoom

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 :

Author: Franck Pertegas

Share This Post On

Trackbacks/Pingbacks

  1. GMAP3 – Plugin jQuery – Faciliter l’utilisation de l’API Google Map via jQuery | LudiBlog - [...] Easy Image Zoom – Plugin jQuery – Zoomez vos images [...]
  2. Skitter – Plugin jQuery – Slideshow for anytime! | LudiBlog - [...] Easy Image Zoom – Plugin jQuery – Zoomez vos images [...]
  3. Web Event #3 de Lyon – Retour | LudiBlog - [...] Easy Image Zoom – Plugin jQuery – Zoomez vos images [...]
  4. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] CirleSlider Flux Slider Zoombox jQuery Favicon Notifier jCoverflip s3Slider Chocolat Glisse Skitter Easy Image Zoom Zoomy Cycle Sponsor Flip…

Submit a Comment

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