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

Les rubriques (actu, forums, tutos) de Développez
Réseaux sociaux


 Discussion forum

Le , par vermine, Responsable JavaScript & AJAX
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 <a> :

Code html :
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 :
<img src="normal.jpg" class="snipe" data-zoom="large.jpg">

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

Code javascript :
$('.snipe img').snipe();

Démo.
Téléchargement sur le site officiel.
D'après un article sur DailyJS.
Offres d'emploi IT
Ingénieur systèmes et réseaux alternance
Alternance
Fullsix - Ile de France - Levallois-Perret
Parue le 09/04/2014
consultant décisionnel sénior TABLEAU SOFTWARE
CDI
LIMTREE - Ile de France - Paris (75011)
Parue le 14/03/2014
Ingénieurs d'études expérimentés HTML5 - CSS3
CDI
COOPTALIS - Nord Pas-de-Calais - Lille (59000)
Parue le 24/03/2014

Voir plus d'offres Voir la carte des offres IT
 
 
 
 
Partenaires

PlanetHoster
Ikoula