Easy Image Zoom – Plugin jQuery – Zoomez vos images

Avec le plugin jQuery Easy Image Zoom, découvrez une autre alternative à Zoomy, et agrémentez votre site d’un effet de zoom sur vos images, idéal pour les boutiques en ligne. Un effet simple, facile à mettre en place et qui fait se qu’on lui demande.

Easy Image Zoom

Découvrons rapidement son utilisation :

Dans un premier temps, le script va agir sur vos éléments ainsi constitués :

<a href="large.jpg"><img src="small.jpg" alt="Small image" /></a>

Vous l’aurez compris, large.jpg est l’image originale (de grande taille) et small.jpg est l’image sur le site de taille réduite.

Ce plugin jQuery est facilement customisable et vous pouvez retoucher le css comme bon vous semble :

#easy_zoom{
    width:600px;
    height:400px;  
    border:5px solid #eee;
    background:#fff;
    color:#333;
    position:absolute;
    top:15px;
    left:400px;
    overflow:hidden;
    -moz-box-shadow:0 0 10px #555;
    -webkit-box-shadow:0 0 10px #555;
    box-shadow:0 0 10px #555;
    /* vertical and horizontal alignment used for preloader text */
    line-height:400px;
    text-align:center;
    }

Voici un exemple de l’implémentation du plugin :

jQuery(function($){
   
    $('a.zoom').easyZoom({
        id: 'imagezoom',
        preload: '<p class="preloader">Loading the image</p>'
        parent: '#container'
    });

});

Comme vous l’aurez deviné, le plugin agira sur tous les éléments « a » ayant la classe « zoom ». Voici les options disponibles :

id (Valeur par défaut : « easy_zoom »)
L’id du nouvel élément image créé.

parent (Valeur par défaut : « body »)
L’élément DOM qui accueillera la nouvelle image zoomée.

append (Valeur par défaut : « true »)
Si l’option vaut true le nouvel élément créé sera inséré dans le dernier enfant du parent. Si l’option vaut false l’élément de création sera dans le premier enfant de l’élément parent.

preload (Valeur par défaut : « Loading… »)
Le message de chargement de l’image zoomée, peut contenir du HTML.

error (Valeur par défaut : « There has been a problem with loading the image. »)
Le message d’erreur si le plugin rencontre un problème de chargement.

Page du plugin jQuery
Télécharger le plugin Easy Image Zoom
Une petite démonstration

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 *


*