Zoomy, un plugin jQuery pour zoomer sur vos images

18 juillet 2011
4 091 vues

Zoomy est un plugin jQuery vous permettant de zoomer sur une image avec une loupe ! Le genre d’outil très prisé par les boutiques en ligne pour donner la possibilité aux internautes de visualiser plus en détails un produit.

Comment ça marche ?

Le concept de Zoomy est simple : il s’agit de relier deux images, une petite qui sera affichée sur votre page web, et une plus grande qui s’affichera partiellement lors du zoom. Pour cela, Zoomy précharge la grande image afin que celle-ci soit prête à être affichée. Tout ça est possible grâce à un peu de HTML, du CSS et du jQuery !

Comment utiliser Zoomy ?

Zoomy est facile à mettre en place ! Commencez par inclure la librairie jQuery, le script (jquery.zoomy1.2.min.js) et la feuille de style (zoomy.css). Puis définissez la structure HTML : une petite image (displayImg.jpg) placée dans un lien qui pointe vers une grande image (zoomImg.jpg). N’oubliez pas de passer une classe CSS au lien (ici « zoom »). C’est ce qui vous permettra d’appliquer le plugin.

<a href="zoomImg.jpg" class="zoom">
    <img src="displayImg.jpg" alt="This is the Display Image" />
</a>

Il ne vous reste plus qu’à ajouter la partie jQuery de la manière suivante.

$(function(){
    $('.zoom').zoomy();                
})(jQuery)

Les options

Il existe plusieurs options pour personnaliser au mieux sa loupe :

  • zoomSize : valeur en pixel qui définit la taille de le loupe (par défaut à 200)
  • zoomText : texte à afficher lors du zoom (par défaut « Click to Zoom »)
  • round : valeur booléenne pour une loupe ronde (« true » par défaut)
  • glare : valeur booléenne pour un reflet de lumière sur la loupe (« true » par défaut)
  • clickable : valeur booléenne pour que le lien soit cliquable (« false » par défaut)
  • attr : attribut pour déclarer la grande image (« href » par défaut)

Pour les utiliser, on procède de la manière suivante :

$('.zoom').zoomy({
        zoomSize: 150,
        zoomText: 'click it',
        round: true,
        glare: true,
        clickable: false,
        attr: 'rel'
});   

Les événements

Il est également possible de définir l’événement : c’est l’action qui va déclencher le zoom. Il en existe quatre : « click » pour le clic, « dblclick » pour le double-clic, « mouseover » pour le roll-over, et « mouseenter » lorsque le pointeur rentre dans l’élément. On l’utilise comme ceci :

$('.zoom').zoomy('mouseover');

Et pour utiliser à la fois un événement et les options :

$('.zoom').zoomy('mouseover',{
        zoomText: 'hover to zoom',
        clickable: true,
        attr: 'rel'
});   

Zoomy fonctionne sur tous les navigateurs récents (Firefox, Chrome, Opera et IE), même s’il utilise la propriété CSS3 « border-radius » qui permet d’obtenir une loupe ronde et qui n’est pas supportée avec les versions antérieurs à Internet Explorer 9. La loupe sera donc forcément carrée sur IE6, IE7 et IE8, mais fonctionnelle ! Le reflet de lumière, quant à lui, est obtenu avec une image PNG. Il n’y a donc pas de support IE6 pour cette option. C’est en tout cas un plugin jQuery très pratique pour mettre en avant des produits sur un site e-commerce !

Requis : jQuery
Démonstration : http://zoomy.me/
Licence : MIT/GPL

Commentaires