Zoomy – Plugin jQuery – Petit effet de zoom sur image simple et sympa

Voici un petit plugin jQuery simple à mettre en place (quand on connait un minimum jQuery) et facile à utiliser. Via ce plugin nommé « Zoomy » par son auteur, vous allez pouvoir ajouter un effet de zoom sur une image de votre site internet. Effet très prisé des boutiques en ligne pour essayer de voir plus de détails sur une photo d’objet par exemple.

zoomy

Pour utiliser ce plugin, la mise en place est identique à la majorité des plugins jQuery :

Appel des librairies et du css

<link type="text/css" rel="stylesheet" href="path-to/zoom1.0.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="path-to/zoomy1.0.js."></script>

Le ou les éléments cibles :

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

Image originale dans le lien et image réduite à l’affichage.

Puis la mise en place de zoomy qui, dans ce cas, touchera tous les éléments de class « zoom » :

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

Démonstration
Télécharger le plugin jQuery Zoomy

Articles qui peuvent vous intéresser :

No Responses

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*