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

Posted By Franck Pertegas on 16 Mar 2011 in Framework, Javascript, Programmation | 0 comments

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.

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 class="zoom" href="zoomImg.jpg">
<img src="displayImg.jpg" alt="This is the Display Image" />
</a>

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 :

• msdropdown – Plugin jQuery – Des icones dans vos balises select/option
• Pixlr – Editeur d’images en ligne – Un photoshop sur le net ?
• FullCalendar – Plugin jQuery – Créez vos propres agendas comme Google
• Sortie de jQuery 1.5
• GMAP3 – Plugin jQuery – L’API Google Map v.3 Integration à la sauce jQuery