ElevateZoom : une fonction de zoom sur images en jQuery
Le 2013-01-28 11:08:01, par FirePrawn, Expert éminent sénior
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 :
Il vous suffit ensuite d'activer le zoom (basique pour l'exemple) en javascript :
Et le tour est joué !
Pour voir plus d'exemples, vous pouvez consulter la page de démonstration.
Source : elevateweb.co.uk
Et vous ?
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 : |
<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 : |
$("#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 ?