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 !

Plugin jquery.snipe
Un effet de loupe paramétrable sur vos images

Le , par vermine

0PARTAGES

1  0 
Plugin jquery.snipe, un effet de loupe
paramétrable sur vos images.

Ce plugin présente un agréable effet de loupe sur les images selon les mouvements de la souris. L'image de « zoom » est séparée, ce qui vous permet de créer des effets. Dans son exemple (attrayant), Franco Bouly montre des images en noir et blanc tandis que la loupe affiche la portion en couleurs pour le zoom.

Parmi les options que vous pouvez manipuler, il y a la taille de la loupe, une paramétrisation CSS, la gestion d'événements, etc.

L'utilisation est assez simple et la manière conseillée est de passer par une balise :

Code html : Sélectionner tout
1
2
3
<a href="large.jpg" class="snipe"> 
  <img src="normal.jpg"> 
</a>

Ou bien de passer par une propriété data-zoom :

Code html : Sélectionner tout
<img src="normal.jpg" class="snipe" data-zoom="large.jpg">

Finalement, vous démarrez le plugin de cette manière :

Code javascript : Sélectionner tout
$('.snipe img').snipe();

Démo.
Téléchargement sur le site officiel.
D'après un article sur DailyJS.

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