Adeptes de jQuery, vous pourrez désormais implémenter une fonctionnalité de zoom d'image dans vos pages !En effet, Elevatezoom.js est un plugin jQuery de zoom d'image à la façon constructeur automobile (je suis sûr que vous voyez de quoi je veux parler).
Ce plugin est entièrement personnalisable, dispose de larges teintes de couleurs, supporte les galleries Fancybox, permet un contrôle externe et différents types de zoom.
Pour finir il est entièrement libre étant édité sous les licences MIT et GPL.
Pour l'installer, rien de plus simple : il vous suffit de récupérer les sources et d'inclure le plugin en plus de jQuery dans votre page.
Pour l'utilisation c'est encore une fois simple comme bonjour : utilisez deux images comme ceci :
| Code html : | Sélectionner tout |
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>Il vous suffit ensuite d'activer le zoom (basique pour l'exemple) en javascript :
| Code javascript : | Sélectionner tout |
$("#img_01").elevateZoom();
Et le tour est joué !
Pour voir plus d'exemples, vous pouvez consulter la page de démonstration.
Source : elevateweb.co.uk
Et vous ?
Que pensez-vous de ce plugin ? Avez-vous déjà cherché à implémenter une telle fonctionnalité dans vos sites ?