17/05/2013

comment faire une image avec un effet zoom au passage de la souris?

image avec effet zoom au passage de la souris
Doc, sur mon site, j'ai de superbes photos détaillés mais elles sont affiché si petites que l'on ne voit rien du tout. Et je voudrais éviter d'afficher celle ci  en grand dans une lightbox qui cacherait tout mon site. Je veux plutôt utiliser un effet de zoom ou d'agrandissement à la loupe sur cette image.

Comment faire un effet  de zoom au passage de la souris sur une photo?

 Je vois ce que tu veux Marty...

Cet effet est très utilisé dans les sites e-commerce par exemple pour mettre en valeur les photos des produits, Voici Zoomy ! C'est un plugin jQuery permettant d'ajouter une loupe sur tes images..


Zoomy est un plugin jQuery permettant d'ajouter une loupe sur vos images, idéal pour voir les détails de vos produits sur un site d'e-commerce.

Très simple à mettre en place et à utiliser, Zoomy permettra à tes visiteurs de voir plus en détail les images de tes sites que tu auras sélectionné.

Côté options, il est possible:
  • De changer la taille de la loupe
  • De changer la forme de la loupe (Carrée ou ronde)
  • D'activer ou non l'effet d'éclat de la loupe
  • Changer le texte incitant à cliquer sur l'image pour ouvrir la loupe
Son utilisation est simple, dans un premier temps, tu déclares les images  dans un lien avec une classe spéciale:
1.<a href="zoomImg.jpg" class="zoom">
2.<img src="displayImg.jpg" alt="This is the Display Image" />
3.</a>
Puis tu initialises le plugin:
1.$('.zoom').zoomy({
2.zoomSize: 180,
3.round: true,
4.glare: true,
5.zoomText: click to Zoom
6.});
Et cela fonctionne !
Le plugin utilisant du CSS3 pour le rendu de la loupe, sur Internet Explorer, tu devra te contenter de la loupe carrée.

Site Officiel de Zoomy


Super mais il en existe d'autres non?








Oh oui! voici un site en anglais qui donne 25 autres plugins de zoom




...dernière minute avant de poster ce message, j'ai trouvé mind-projects.it où il y a également des plugins de cet effet et... gratuits!

Aucun commentaire:

Enregistrer un commentaire