IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

ElevateZoom : une fonction de zoom sur images en jQuery

Le , par FirePrawn

9PARTAGES

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 ?

Une erreur dans cette actualité ? Signalez-nous-la !