loupe est un plugin jQuery qui permet d’appliquer un effet loupe sur une image lorsque le curseur passe au-dessus. Avec un poids plume de moins d’un kb un fois minifié, ce script devrait trouver une place dans votre boite à outils web. Son utilisation est simple, il suffit d’initialiser le script de la façon suivante :
$('selector').loupe({
width: 200, // Largeur de la loupe
height: 150, // hauteur de la loupe
loupe: 'loupe' // Classe CSS pour cibler les éléments à agrandir
});
Et d’utiliser un des marquages HTML suivants :
<a id="demo-1" href="bigimage.jpg">
<img src="smallimage.jpg" />
</a>
$('#demo-1').loupe();
ou
<img id="demo-2" src="bigimage.jpg" />
$('#demo-2').loupe();
Via @MarlbIsManiaks