JQuery – JLoupe, une loupe pour vos images

Aujourd’hui, un petit plugin JQuery qui peu s’avérer utile et qui est souvent recherché sur la toile.

Il s’agit d’un effet de loupe lors du passage sur une image, très souvent usité sur les boutiques en ligne afin d’agrandir une partie d’un produit pour visualiser des détails.

JLoupe

JLoupe

Ce plugin est (comme souvent avec JQuery) assez simple à mettre en place, pour qui connait le célèbre framework javascript.

Quelques exemples :

Insertion du plugin :

[pastacode lang= »markup » manual= »%3Cscript%20src%3D%22jquery.jloupe.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Utilisation sur une image réduite via le css :

[pastacode lang= »markup » manual= »%3Cimg%20class%3D%22jLoupe%22%20style%3D%22width%3A%20256px%3B%22%20src%3D%22http%3A%2F%2Fvotre-site.com%2Fimage.jpg%22%20alt%3D%22image%22%20%2F%3E » message= » » highlight= » » provider= »manual »/]

Utilisation sur une miniature :

[pastacode lang= »markup » manual= »%3Cimg%20class%3D%22jLoupe%22%20src%3D%22http%3A%2F%2Fvotre-site.com%2Fimage_mini.jpg%22%20alt%3D%22image%22%20longdesc%3D%22http%3A%2F%2Fvotre-site.com%2Fimage.jpg%22%20%2F%3E » message= » » highlight= » » provider= »manual »/]

Comme vous l’aurez compris, il suffit de mettre la classe « jLoupe » sur vos images concernées, pour le 2eme exemple, le plugin ira chercher l’image citée dans l’attribut longdesc.

Démo et téléchargement : http://chrisiufer.com/loupe/sample.html

Bon code à tous 😉

Author: Franck Pertegas

Share This Post On

Trackbacks/Pingbacks

  1. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] Glisse Skitter Easy Image Zoom Zoomy Cycle Sponsor Flip Wall Easy Gallery ColorBox MaxImage JLoupe JQuery Infinite Carousel AnythingSlider…

Submit a Comment

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