{"id":27,"date":"2008-07-02T12:18:12","date_gmt":"2008-07-02T11:18:12","guid":{"rendered":"https:\/\/www.magavenue.com\/blog\/?p=27"},"modified":"2008-07-02T12:18:12","modified_gmt":"2008-07-02T11:18:12","slug":"comment-ameliorer-laffichage-de-ses-photos-dans-magento-avec-lightbox","status":"publish","type":"post","link":"https:\/\/www.magavenue.com\/blog\/magento\/comment-ameliorer-laffichage-de-ses-photos-dans-magento-avec-lightbox\/","title":{"rendered":"Comment am\u00e9liorer l'affichage de ses photos dans Magento avec Lightbox"},"content":{"rendered":"

Lorsque vous concevez votre site de commerce en ligne, l’aspect visuel de votre site est tr\u00e8s important. C’est la premi\u00e8re impression qui va donner envie ou pas \u00e0\u00a0 votre futur acheteur de continuer sur votre site ou d’aller voir votre concurent.
\nIl faut donc prendre en compte : la qualit\u00e9 des images, la rapidit\u00e9 d’affichage, la navigation ais\u00e9e \u00e0\u00a0 travers votre site…, mais la pr\u00e9sentation des photos de vos fiches produits est aussi importante. Par exemple, faire appara\u00eetre une photo d’un article sur un fond noir, lorsque vous cliquez dessus pour l’agrandir, permet de la faire ressortir et de d’avoir un aspect plus agr\u00e9able du produit.
\n
\nCette fonction est int\u00e9gr\u00e9 en standard dans Prestashop, mais pas dans Magento. La solution consiste \u00e0\u00a0 utiliser le script Lightbox.js (vous pouvez voir des exemples sur le site : Lightbox 2<\/a>).
\nUn tr\u00e8s bon article de Sebastian Enders nous explique comment faire sur le wiki de Magento<\/a>.
\nJe vais donc vous fournir ci-dessous une traduction de ces explications avec quelques modifications :
\nCommencez par t\u00e9l\u00e9charger la version zipp\u00e9 de lightbox<\/a> et \u00e0\u00a0 la d\u00e9compresser.
<\/p>\n

Je n’ai pas test\u00e9 avec une version plus r\u00e9cente, mais d’apr\u00e8s Sebastian les versions plus r\u00e9centes ne sont pas compatible avec la version de prototype utilis\u00e9 par Magento.<\/p>\n

Pour commencer nous supposons que Magento est install\u00e9 dans un dossier Magento sur votre serveur.<\/p>\n

Copie des fichiers de lightbox dans Magento<\/h2>\n

Commencez par cr\u00e9er un r\u00e9pertoire lightbox dans le dossier js de Magento et copiez le fichier lightbox.js que vous venez de d\u00e9compresser dans ce r\u00e9pertoire.<\/p>\n

Copiez ensuite le fichier lightbox.css dans le r\u00e9pertoire \/skin\/frontend\/default\/default\/css\/ de Magento.<\/p>\n

Cr\u00e9ez un r\u00e9pertoire \/skin\/frontend\/default\/default\/images\/lightbox\/ dans Magento et copiez dedans tous les fichiers que vous trouverez dans le dossier images du dossier lightbox d\u00e9compress\u00e9.<\/p>\n

Modification des fichiers css et js de lightbox<\/h2>\n

Ouvrez ensuite le fichier lightbox.css qui se trouve dans \/magento\/skin\/frontend\/default\/default\/css et remplacez :<\/p>\n

background: transparent url(..\/images\/blank.gif) no-repeat;
<\/p>\n

par :<\/p>\n

background: transparent url(\/magento\/skin\/frontend\/default\/default\/images\/lightbox\/blank.gif) no-repeat<\/p>\n

et :<\/p>\n

#prevLink:hover, #prevLink:visited:hover { background: url(..\/images\/prevlabel.gif) left 15% no-repeat; }
<\/p>\n

par :<\/p>\n

#prevLink:hover, #prevLink:visited:hover { background: url(\/magento\/skin\/frontend\/default\/default\/images\/lightbox\/prevlabel.gif) left 15% no-repeat; }
<\/p>\n

et :
<\/p>\n

#nextLink:hover, #nextLink:visited:hover { background: url(..\/images\/nextlabel.gif) right 15% no-repeat; }
<\/p>\n

par :<\/p>\n

#nextLink:hover, #nextLink:visited:hover { background: url(\/magento\/skin\/frontend\/default\/default\/images\/lightbox\/nextlabel.gif) right 15% no-repeat; }
<\/p>\n

Ouvrez ensuite : \/magento\/js\/lightbox\/lightbox.js, recherchez et remplacez :
<\/p>\n

var fileLoadingImage = \u00ab\u00a0images\/loading.gif\u00a0\u00bb;<\/p>\n

var fileBottomNavCloseImage = \u00ab\u00a0images\/closelabel.gif\u00a0\u00bb;<\/p>\n

par :<\/p>\n

var fileLoadingImage = \u00ab\u00a0\/magento\/skin\/frontend\/default\/default\/images\/lightbox\/loading.gif\u00a0\u00bb;<\/p>\n

var fileBottomNavCloseImage = \u00ab\u00a0\/magento\/skin\/frontend\/default\/default\/images\/lightbox\/closelabel.gif\u00a0\u00bb;<\/p>\n


<\/p>\n

Ins\u00e9rez l’appel aux fichiers javascript et feuille de style de lightbox dans Magento<\/h2>\n

Ouvrez le fichier : \/magento\/app\/design\/frontend\/default\/default\/layout\/page.xml et ins\u00e9rez entre :
<\/span><\/p>\n

<block type<\/span>=\u00ab\u00a0page\/html_head\u00a0\u00bb<\/span> name<\/span>=\u00ab\u00a0head\u00a0\u00bb<\/span> as=\u00ab\u00a0head\u00a0\u00bb<\/span>><\/span><\/span>
\n….
\n<\/block>
\nles 2 lignes suivantes :<\/p>\n

<action method=\u00a0\u00bbaddJs\u00a0\u00bb><script>lightbox\/lightbox.js<\/script><\/action>
\n<action method=\u00a0\u00bbaddCss\u00a0\u00bb><stylesheet>css\/lightbox.css<\/stylesheet><\/action><\/p>\n

Insertion de l’appel \u00e0\u00a0 lightbox dans une fiche produit<\/h2>\n

Ouvrez le fichier :<\/p>\n

\/magento\/app\/design\/frontend\/default\/default\/template\/catalog\/product\/view\/media.phtml<\/p>\n

et remplacez :<\/p>\n

\n

<?php foreach ($this->getGalleryImages() as $_image): ?><\/p>\n

<li><\/p>\n

<a href=\u00a0\u00bb#\u00a0\u00bb onclick=\u00a0\u00bbpopWin(‘<?php echo $this->getGalleryUrl($_image) ?>’, ‘gallery’, ‘scrollbars=yes,width=200,height=200,resizable=yes’);return false;\u00a0\u00bb><\/p>\n

<img src=\u00a0\u00bb<?php echo $this->helper(‘catalog\/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68,68); ?>\u00a0\u00bb alt=\u00a0\u00bb<?php echo $this->htmlEscape($_image->getLabel()) ?>\u00a0\u00bb title=\u00a0\u00bb<?php echo $this->htmlEscape($_image->getLabel()) ?>\u00a0\u00bb\/><\/p>\n

<\/a><\/p>\n

<\/li><\/p>\n

<?php endforeach; ?><\/p>\n<\/div>\n

par :<\/p>\n

\n

<?php foreach ($this->getGalleryImages() as $_image): ?><\/p>\n

<li><\/p>\n

<a href=\u00a0\u00bb<?php echo $this->helper(‘catalog\/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>\u00a0\u00bb rel=\u00a0\u00bblightbox[rotation]\u00a0\u00bb title=\u00a0\u00bb<?php echo $_product->getName();?>\u00a0\u00bb><\/p>\n

<img src=\u00a0\u00bb<?php echo $this->helper(‘catalog\/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68, 68); ?>\u00a0\u00bb width=\u00a0\u00bb68″ height=\u00a0\u00bb68″ alt=\u00a0\u00bb\u00a0\u00bb\/><\/p>\n

<\/a><\/p>\n

<\/li><\/p>\n

<?php endforeach; ?><\/p>\n<\/div>\n


Voil\u00e0\u00a0 si maintenant vous cliquez sur un produit dans Magento il s’affichera en grand sur un fond noir avec la fonction Lightbox.<\/p>\n

Pour avoir un affichage correct de vos photos je vous conseille de limiter leurs taille \u00e0\u00a0 600 x 600 pixels.
<\/p>\n","protected":false},"excerpt":{"rendered":"

Lorsque vous concevez votre site de commerce en ligne, l’aspect visuel de votre site est tr\u00e8s important. C’est la premi\u00e8re impression qui va donner envie ou pas \u00e0\u00a0 votre futur acheteur de continuer sur votre site ou d’aller voir votre concurent. Il faut donc prendre en compte : la qualit\u00e9 des images, la rapidit\u00e9 d’affichage,… Lire la suite »Comment am\u00e9liorer l'affichage de ses photos dans Magento avec Lightbox<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[79,80,94,136,143,176],"yoast_head":"\nComment am\u00e9liorer l'affichage de ses photos dans Magento avec Lightbox - Magavenue : Le Blog du ecommerce Open-source<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.magavenue.com\/blog\/magento\/comment-ameliorer-laffichage-de-ses-photos-dans-magento-avec-lightbox\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment am\u00e9liorer l'affichage de ses photos dans Magento avec Lightbox - Magavenue : Le Blog du ecommerce Open-source\" \/>\n<meta property=\"og:description\" content=\"Lorsque vous concevez votre site de commerce en ligne, l’aspect visuel de votre site est tr\u00e8s important. C’est la premi\u00e8re impression qui va donner envie ou pas \u00e0\u00a0 votre futur acheteur de continuer sur votre site ou d’aller voir votre concurent. Il faut donc prendre en compte : la qualit\u00e9 des images, la rapidit\u00e9 d’affichage,… Lire la suite »Comment am\u00e9liorer l'affichage de ses photos dans Magento avec Lightbox\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.magavenue.com\/blog\/magento\/comment-ameliorer-laffichage-de-ses-photos-dans-magento-avec-lightbox\/\" \/>\n<meta property=\"og:site_name\" content=\"Magavenue : Le Blog du ecommerce Open-source\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/magavenue\/\" \/>\n<meta property=\"article:published_time\" content=\"2008-07-02T11:18:12+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Magavenue\" \/>\n<meta name=\"twitter:site\" content=\"@Magavenue\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture est.\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.magavenue.com\/blog\/#website\",\"url\":\"https:\/\/www.magavenue.com\/blog\/\",\"name\":\"Magavenue : Le Blog du ecommerce Open-source\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.magavenue.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.magavenue.com\/blog\/magento\/comment-ameliorer-laffichage-de-ses-photos-dans-magento-avec-lightbox\/#webpage\",\"url\":\"https:\/\/www.magavenue.com\/blog\/magento\/comment-ameliorer-laffichage-de-ses-photos-dans-magento-avec-lightbox\/\",\"name\":\"Comment am\\u00e9liorer l'affichage de ses photos dans Magento avec Lightbox - Magavenue : Le Blog du ecommerce Open-source\",\"isPartOf\":{\"@id\":\"https:\/\/www.magavenue.com\/blog\/#website\"},\"datePublished\":\"2008-07-02T11:18:12+00:00\",\"dateModified\":\"2008-07-02T11:18:12+00:00\",\"author\":{\"@id\":\"https:\/\/www.magavenue.com\/blog\/#\/schema\/person\/583c008caa8ac9ecf5994ed089fffbad\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.magavenue.com\/blog\/magento\/comment-ameliorer-laffichage-de-ses-photos-dans-magento-avec-lightbox\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.magavenue.com\/blog\/#\/schema\/person\/583c008caa8ac9ecf5994ed089fffbad\",\"name\":\"Magavenue\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.magavenue.com\/blog\/#personlogo\",\"inLanguage\":\"fr-FR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5eaa47e1e657a76ab2fb0f045063b303?s=96&d=mm&r=g\",\"caption\":\"Magavenue\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/posts\/27"}],"collection":[{"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":0,"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}