Astuce WebAcappella Expert : Un effet zoom sur vos images avec MagicMagnify

Très utile pour un site e-commerce par exemple pour mettre en valeur les photos de vos produits, voici un plugin proposé par MagicToolBox qui vous permettra de mettre un effet
zoom sur vos images
.

Le plugin MagicMagnify

zoom-magic-magnifyDisponible en version démo gratuite (limitée et avec mention commerciale), le plugin MagicMagnify va permettre de donner à vos images un effet zoom au passage de la souris. En survolant la photo de votre produit, les internautes pourront en voir les détails.

Avec la version payante (le prix d’une licence est fixé à 29 £), vous pourrez facilement avoir d’autres effets et options de configuration. Un outil vraiment pratique pour la mise en valeur des produits de votre boutique.

A noter : si votre site est visionné depuis un appareil ne supportant pas le Javascript, l’effet zoom sera annulé et remplacé par l’ouverture d’une nouvelle image en plus grand sur un simple clic.

Le plugin proposé en anglais uniquement est téléchargeable à l’adresse http://www.magictoolbox.com/magicmagnify

A noter : l’installation de la démo du plugin peut légèrement différer de la version payante.

Préparer vos images

Avant l’installation du plugin, préparez vos images :

  • une photo « small » comprise entre 300 et 600 pixels de large que vous utiliserez comme image par défaut. Elle peut être au format PNG ou JPEG.
  • un grand format qui sera utilisé pour le zoom. La taille de votre photo JPEG doit être inférieure à 2880 pixels de largeur et de hauteur. Au délà, des problèmes de zoom pourront être constatés.

N’oubliez pas que, comme toute photo utilisée pour le web, votre fichier doit être en RVB et 72 DPI.

Pour vous y retrouver, les noms des photos doivent être explicites, par exemple :

  • lampe-1-small.jpg
  • lampe-1-large.jpg

Installation du plugin par FTP (utilisateur expert)

Après avoir téléchargé puis décompressé le fichier contenant le plugin, ouvrez votre client FTP (Filezilla par exemple) et connectez-vous au serveur où est hébergé votre site internet.

Déposez le dossier contenant le plugin « MagicMagnify » dans votre site. Donnez au dossier le nom de votre choix, si possible, un nom simple très facilement mémorisable ou conservez celui par défaut.

La prochaine étape consiste à envoyer toutes vos photos sur le serveur. Pour cela, ouvrez le dossier « images », sélectionnez les photos de votre choix sur votre ordinateur et déposez les dans le dossier. Un temps de téléchargement est à prévoir. Ne déconnectez pas du client FTP tant que cette opération n’est pas terminée.

Actualisez ensuite le serveur pour que toutes les modifications effectuées soient prises en compte.

Dans WebAcappella…

a/ Déclaration du fichier « magicmagnify.js »

Ouvrez WebAcappella et déclarez le fichier « magicmagnify.js » dans le HEAD de votre site. Pour cela, allez dans « Site web », « Propriétés du site web » et sélectionnez l’onglet « Avancé ».

Dans la section « Code HTML », collez l’extrait de code suivant :

<script src="http://nomdedomaine.fr/test-magic/magicmagnify/magicmagnify.js" type="text/javascript"></script>

Pensez à modifier l’adresse url de votre nom de domaine et le nom du dossier contenant le plugin surtout si vous l’avez renommé. Puis validez en cliquant sur « OK ».

b/ Insertion de votre image zoomée

Depuis l’explorateur de pages, sélectionnez la page où vous souhaitez mettre votre image avec effet zoom. Depuis le menu « Insertion », insérez un élément « Code HTML » et collez le code par défaut suivant :

<a href="http://nomdedomaine.fr/magicmagnify/images/image-large.jpg"class="MagicMagnify" id="Magnifier1"><img alt="Nom du produit" src="http://nomdedomaine.fr/magicmagnify/images/image-small.jpg"></a><br/>

Vous allez devoir maintenant modifier les liens vers vos images. Pour cela, sélectionnez une première fois le lien « href » compris entre guillemets puis renseignez l’adresse url exacte de votre image large déposée sur votre serveur. Faites de même pour le second lien « src » en indiquant cette fois l’adresse url de votre photo « small ». Enfin, modifiez la balise «alt » en renseignant le nom de votre produit.

Attention : il faut absolument que les liens vers vos images ainsi que le nom du produit soient entre guillemets.

Vous pouvez maintenant tester l’effet puis ensuite publier votre site.

A noter : d’autres exemples de code HTML d’options du plugin sont disponibles à l’adresse http://www.magictoolbox.com/magicmagnify/integration/.

N’hésitez pas à visiter le site de MagicToolBox qui propose d’autres plugins susceptibles de vous intéresser.

3 Comments

  1. Sebastien

    Merci !!

    Comprendre l’intégration de plugs-in ou de codes supplémentaires afin de personnaliser les pages créées avec WebAcappella est un grand plus !! 🙂

  2. Designatic Créations

    Je suis entièrement d’accord avec Sébastien !! Le coup du code dans le m’aurai échappé si je l’avais fais moi-même. Très bon tutoriel, dommage par contre pour le prix de ce petit outil…

  3. PEGGY

    un petit coucou et un grand MERCI !!!
    , j’ai crée ma boutique il y a moins de 2 ans, et j’aurais eut besoin de vos conseils et astuces, mais c’est super qu’aujourd’hui on puisse les avoir, il y a toujours pleins de choses à apprendre .
    Juste une demande, essayer d’être un peu plus cleir quelques fois, je suis sur qu’il y a pleins de novices comme moi, qui ont besoin de tout ces conseils 😉
    Merci à l’équipe pour votre travail 🙂

Commentaires fermés