Zoom image magento : zoom sur les petites images de la fiche produit

novembre 28, 2009 26 Commentaires

Zoomer sur les petites images de la fiche produit grâce au js shadowbox est un bon moyen pour présenter le produit. Le zoom par defaut de magento sur les petites images (systeme de pop up) étant un peu « obsolète ». C’est le même principe pour la grande photo de la fiche produit vous pouvez appliquer le même code pour zoomer.

Ajout du template zoom-sb

Dans le layout catalog.xml rajouter ce code :

<catalog_product_view>
    <reference name="head">
       <block type="core/template" name= "zoom-sb" template="buggy/zoom-sb.phtml"/>
    </reference>

Dans ce template placez l’appel au JS et Css nécessaire à la mise en place du zoom :

<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('js/zoom-sb/shadowbox.css');?>"/>
<script type="text/javascript" src=" <?php echo $this->getSkinUrl('js/zoom-sb/shadowbox.js'); ?>"> </script>

Ne pas oublier de placer les fichiers dans le dossier JS de votre skin. J’ai tout regroupé dans ce dossier.

magento\skin\frontend\default\default\js\zoom-sb\

Vous pouvez faire plus simple et placer l’appel du css et js dans la reference head du noeud catalog_product_view

<action method="addJs"><script>mage/zoom-sb/shadowbox.css</script></action>
<action method="addCss"><stylesheet>css/shadowbox.css</stylesheet></action>

Appliquer le zoom sur les petites images

Dans le fichier media.phtml rajouter ce code en haut de la page, ce code inclus la langue Français :

<script type="text/javascript">
Shadowbox.init({
    language:   "fr",
   });
</script>

Sur les petites photos remplacez le code d’origine du pop up par ce code :
Remplacer juste le « li ».

<?php foreach ($this->getGalleryImages() as $_image):
<li>
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>" rel="shadowbox" >
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(60, 60); ?>
" width="60" height="60" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</li>
Zoom sur une image de la fiche produit magento

Zoom sur une image de la fiche produit magento

Vous pouvez appliquer différents effets à votre zoom, rajouter des boutons suivants précédents :

Pour rajouter toutes les images sous forme de galerie, ajoutez [Vacation] => rel= »shadowbox[Vacation]
zoom-image-magento-galerie

Voici le site du créateur de shadowbox vous y trouverez toute la documentation.

Zoomer sur la grande photo

Vous pouvez appliquer le même effet sur la grande photo de la fiche produit. Pour cela il faut enlever le systeme de zoom de magento et placer ce code dans le fichier media.phtml

 $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />'; ?> 
<a href="<?php  echo $this->helper('catalog/image')->init($_product, 'image') ;?>" rel="shadowbox"> <?php echo $_helper->productAttribute($_product, $_img, 'image'); ?> </a>
Code
26 commentaires : “Zoom image magento : zoom sur les petites images de la fiche produit”
  1. Phel dit :
    1 décembre 2009 à 19 h 04 min

    Salut ça marche j’essaye de zoomer sur la grande photo. Magento recadre cette photo, comment ajouter le même code.

    dsl pour le dérangement j’ai déjà poste sur le forum de magento

  2. admin dit :
    2 décembre 2009 à 8 h 13 min

    Bonjour
    je viens de faire un rajout au tutoriel. j’ai mis le code pour zoomer sur la grande photo.
    Tu peux tester.

  3. phel dit :
    2 décembre 2009 à 20 h 49 min

    merci
    beaucoup j’ai rajouté le code l’image apparaît dans le shadowbox. Vraiment merci

  4. Holan dit :
    5 décembre 2009 à 17 h 51 min

    Bonjour félicitation pour le blog j’apprends beaucoup. Mon niveau sur Magento evolue avec lui est un agrandissement sur limage similaire a zoom plus es t’il envisageable avec magonto. Je crois avoir vu une extension sur Magento connect payante si mes souvenirs sont exacts.

  5. Lath dit :
    7 janvier 2010 à 9 h 38 min

    Lut
    je bloque à la première étape ou je doit rajouter le code? dans quel endroit du layout catalog.XML
    zoom-sb.phtml

  6. cédric rousset dit :
    7 janvier 2010 à 10 h 18 min

    Salut dans

    <catalog_product_view>
 
 <reference name="head">
 
le code ici
</reference>

    regardes ensuite que le shadowbox et bien importé

  7. Jerome dit :
    14 février 2010 à 10 h 43 min

    Ré bonjour
    j’ai le même blocage que sur le tutoriel ajout des images sur la liste de produits.
    La le code estven place mais rien ne fonctionne.

  8. cédric rousset dit :
    14 février 2010 à 16 h 49 min

    Bonjour,
    comme je t’ai repondu sur l’autre tutoriel tu est sur d’avoir mis le code au bon endroit ?

  9. Francois dit :
    19 mars 2010 à 8 h 15 min

    Salut,

    désolé mais je trouve que ton tuto manque d’éclaircissement.
    1ère étape ça va, ajouter le code dans catalog.xml ça c’est bon mais alors après…

    Placer les appels au jss et css dans le template.. oui mais dans quel fichier ?
    Il faut deviner qu’il faut aller chercher les js et css sur shadowbox.

    Bref moi je n’ai pas réussi ! Ca me met une grosse erreur 500.

    ;)

  10. cédric rousset dit :
    22 mars 2010 à 7 h 11 min

    Bonjour,
    Dans le tutoriel le template est buggy/zoom-sb.phtml
    il se trouve dans le code magento que je donne.
    Comme indiqué tu peux le faire directement avec les layout.

  11. Francois dit :
    23 mars 2010 à 11 h 11 min

    Ah oui merci. J’ai réussi avec la deuxième méthode (ouf !)
    L’effet est superbe !

    Par contre j’ai une petite question. Maintenant qu’on peut visionner toutes les photos du produit à la suite en diaporama, les photos 1 et 2 sont les mêmes. Elles reprennent la photo de base du produit. Est ce qu’on peut en élever une pour ne pas afficher deux fois la même à la suite ?

  12. cédric rousset dit :
    23 mars 2010 à 13 h 03 min

    Magento zoome sur les images que tu places sous la grosse photo. Si tu ne veux pas de zoom sur la même photo que celle en grand, il faut l’exclure via le back-office de magento en cochant « exclure » si mes souvenirs sont exacts.

  13. Francois dit :
    23 mars 2010 à 13 h 09 min

    Oui c’est ça ! Merci merci !

  14. Thibaut dit :
    23 avril 2010 à 14 h 07 min

    Bonjour,

    Tout d’abord merci pour le tuto!

    Cependant ca ne fonctionne pas chez moi, j’ai bien ajouté les fichiers dasn ce répertoire:
    magento\skin\frontend\[monInterFace]\[monTheme]\js\zoom-sb\

    j’ai utilisé la deuxième méthode et ajouté dasn catalog.xml les appelles:
    mage/zoom-sb/shadowbox.js
    css/shadowbox.css

    j’ai modifié media.phtml comme ci-dessus…
    rien n’y fait. j’ai vérifié, les include ne sont pas fait dans le head de ma page produit, je ne comprends pas.
    Si quelqu’un à une torche à me passer.

    Merci d’avance.

  15. cédric rousset dit :
    24 avril 2010 à 7 h 03 min

    Bonjour Thibaut,
    Surement une erreur dans le code d’import des fichiers.
    Tu peux poster le code que tu a mis dans le layout.
    Entoure le des balise

     

    Sinon wordpress ne le digèrera pas :)

  16. Boun dit :
    13 mai 2010 à 22 h 15 min

    Bonjour Cédric,

    J’ai un problème d’intégration du « shadowbox ».
    J’ai suivi attentivement les étapes mais je n’arrive pas à implémenter le zoom sur les miniatures.
    La seule action que j’arrive à obtenir est au clic sur une miniature, j’ai le voile noir qui se lance par dessus toute la page mais aucune image n’apparaît.

    Je vais résumer ce que j’ai fait :
    Dans le fichier catalog.xml :

    zoom sb/shadowbox.js
    css/shadowbox.css

    J’ai ajouté le fichier « shadowbox.js » dans le répertoire « {magento}/js/zoom-sb/shadowbox.js ».
    J’

  17. Boun dit :
    13 mai 2010 à 22 h 18 min

    Pardon Cédric, peux-tu mixer le commentaire avec celui-ci (j’ai rippé et j’ai fait « submit »).

    [suite]

    J’ai ajouté « shadowbox.css » dans le répertoire css de mon template utilisé.

    Mais je pense qu’il me manque la ligne que tu as appelé :

    et si je mets cette ligne telle quelle, ça plante méchamment ce qui semble logique.
    Par quoi dois-je remplacer cette ligne ?
    Le fichier « zoom-sb.phtml » qui est-ce ? Et tu l’as mis dans un répertoire « buggy » où doit-il se situer ?

    Merci d’avance pour éclairer ma lanterne parce que là ça fait des heures que je bloque !

  18. cédric rousset dit :
    14 mai 2010 à 7 h 47 min

    Bonjour Boun,
    Dans le tutoriel il y a 2 façons d’importer :
    - soit via le fichier zoom-sb.phtml (le client le voulait comme ça)
    - Soit via le layout.
    Donc il faut choisir une des 2 méthodes.
    Si tu choisis via le fichier zoom-sb.phtml, il faut que tu ajoutes ce fichier dans le dossier template de ton thème.
    Pour ce projet ( montheme/template/buggy/zoom-sb.phtml)
    À toi de remplacer le dossier buggy par celui que tu veux.
    Ensuite le reste du code et idem.
    Si magento ne trouve pas le bon chemin des images, regardes avec firebug.

  19. Boun. dit :
    14 mai 2010 à 11 h 02 min

    J’ai un autre souci.
    Je suis passé par la seconde méthode pour les fichiers, ils semblent tous se charger.
    Quand je clique sur une miniature, j’ai l’overlay noir qui apparaît mais aucune image ne se charge.
    En inspectant la page, j’ai bien toutes les div sb qui existent mais il n’y a rien dans chacune des div…
    C’est peut-être dû à un problème de transmission de l’url de l’image vers le fichier shadowbox.js ? (Tous les liens vers les images fonctionnent bien, j’ai vérifié).

  20. ader dit :
    14 mai 2010 à 15 h 16 min

    Bonjour,

    Peux-tu m’écrire les chemin exacte des fichier à modifier ( catalog.xml, media.phtml) pour avoir les fonctionnalité du zoom stp!

    je ne trouve pas le dossier zoom-sb en suivant le chemin : magento\skin\frontend\default\default\js\zoom-sb\ comme tu l’as indiqué dans le tuto.
    J’utilise magento 1.4.0.1

    Merci d’avance.

  21. Boun dit :
    14 mai 2010 à 23 h 52 min

    Salut Cédric,

    Je t’écris à nouveau pour partager ma dernière expérience avec Shadowbox, peut-être que ça aidera certain pour vous éviter de vous arracher les cheveux ou de perdre votre temps.
    Le problème ne venait non pas de l’implémentation du code (j’ai suivi la seconde méthode), j’ai compris d’où venait mon problème (enfin je pense).

    J’ai voulu tester sur une page simple shadowbox, un lien avec une image.
    En me servant des fichiers css et js provenant du site web de shadowbox la version 3.0.3, et ben mon test ne fonctionnait pas du tout.

    J’ai trouvé un site sur le net qui se servait de shadowbox, j’ai récupéré les fichiers css et js et par miracle ça a fonctionné du premier coup !!!!
    En comparant les commentaires du fichier js :
    /*
    * Shadowbox.js, version 3.0.3
    * http://shadowbox-js.com/
    *
    * Copyright 2007-2010, Michael J. I. Jackson
    * Date: 2010-04-06 04:42:15 +0000
    */

    Le fichier date du 6 avril et c’est celui là qui ne fonctionne pas chez moi.

    Pour le fichier que j’ai trouvé, la date est le 10 mars.
    Il faudrait que je compare les fichiers pour vérifier les différences.

    J’espère que mon post pourra aider certains.

  22. cédric rousset dit :
    16 mai 2010 à 7 h 29 min

    Salut Boun,
    Merci pour ton retour ça aidera certainement d’autres…
    Le tutoriel je l’avais fait avec des fichiers en local ou sur serveur, pas de lien direct sur le site web de shadowbox.

    @ader,
    Il n’y a pas de dossier zoom-sb, ni de fichier zoom-sb.css ou autre, je les ai ajoutés pour le tutoriel.

  23. alexis dit :
    11 octobre 2011 à 14 h 46 min

    « Pour rajouter toutes les images sous forme de galerie, ajoutez [Vacation] => rel= »shadowbox[Vacation] »
    Où faut-il placer ce code ? je n’arrive pas à afficher le shadowbox sous forme de galerie

  24. cédric rousset dit :
    16 octobre 2011 à 8 h 13 min

    il faut l’ajouter dans le code d’appel du shadowbox
    au lieu de rel= »shadowbox » tu mets rel= »shadowbox[Vacation] » ( sur le code de la galerie)

  25. Michel dit :
    1 décembre 2012 à 9 h 30 min

    Bonjour Cédric,

    Bien ce tuto, j’aimerai juste savoir comment tu rajoutes les boutons « suivants » et « précédents ». Tu ne l’as pas précisé:-)
    Merci à toi

  26. Michel dit :
    5 décembre 2012 à 7 h 17 min

    Bjr

    Ok j’ai trouvé…alors pour ceux à qui cela intéresse aller dans le js et mettre l’option continous sur « true » au lieu de « false » par défaut.
    Attention il n’y a pas de « Previous ».

Poster un commentaire

(obligatoire)

(obligatoire)