jQloupe, faites des zooms sur vos images

Voici un plugin jQuery permettant de faire apparaitre une loupe pour aggrandir une zone de l'image en fonction de la position de la souris.

Démo

By Photo by Chris Danals, National Science Foundation ([2]) [Public domain], via Wikimedia Commons

Pour l'utiliser, il suffit d'avoir la structure HTML suivante :

<a href="image_url" class="zoom" >     <img src="image_url" style="max-width:500px;max-height:500px;width:auto;height:auto" /> </a>

Et enfin utiliser le plugin au chargement de la page :

<link rel="stylesheet" type="text/css" media="screen" href="jqloupe.min.css" /> <script type="text/javascript" src="jquery.min.js" ></script> <script type="text/javascript" src="jqloupe.min.js" ></script> <script type="text/javascript">     $(function(){         $('a.zoom').jQLoupe();     }); </script>

Ce plugin comporte 2 paramètres :

  • diameter : permet de modifier le diamètre de la loupe
  • border : permet de modifier le style de la bordure de la loupe
<script type="text/javascript">     $(function(){         $('a.zoom').jQLoupe(diameter:75, border:"3px solid #069");     }); </script>

Version : 0.1

retourner en haut de la page