Mit den folgenden Schritten kann man einfach und relativ schnell eine schöne Lightbox für die Artikel-Detail-Ansicht in Magento-Onlineshops einbauen. Wir haben uns hier für die auf jQuery basierende Fancybox entschieden.
Für den Einbau anderer Lightbox-Varianten sollte diese Anleitung jedoch auch als grobe Vorlage dienen können. Umgesetzt in Magento 1.7.0.2.
1) Fancybox-Dateien downloaden.
2) Datei default.js erstellen, in der die Fancbox initialisiert wird, dabei auf "noConflict" achten:
jQuery.noConflict();
jQuery(document).ready(function(e) {
jQuery('.fancybox-img').fancybox();
});
3) Javascript-Dateien (jquery.js, fancybox.js und die soeben erstellte default.js) in den Template-Ordner \skin\frontend\TEMPLATENAME\default\js\ kopieren.
4) CSS-Datei und Bilder in den Ordner \skin\frontend\TEMPLATENAME\default\css\fancybox\ kopieren.
5) Einbindung der benötigten Dateien in der \app\design\frontend\TEMPLATENAME\default\layout\local.xml:
<?xml version="1.0"?>
<layout version="0.1.0">
<default>
<reference name="head">
<action method="addCss"><stylesheet>css/fancybox/fancybox.css</stylesheet></action>
<action method="addItem"><type>skin_js</type><name>js/jquery.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/fancybox.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/default.js</name></action>
</reference>
</default>
</layout>
6) Einbindung der Fancybox in der Artikel-Detailansicht des Magento-Shops in der Datei \app\design\frontend\TEMPLATENAME\default\template\catalog\product\view\media.phtml:
Die Klasse "product-image-zoom" sollte hier etwa so aussehen:
<p class="product-image product-image-zoom">
<?php
$_img = '<a href="' . $this->helper('catalog/image')->init($_product, 'image') . '" class="fancybox-img" rel="product-gallery"><img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image') ->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" /></a>';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</p>
Die nachfolgende foreach-Schleife sollte dann so lauten:
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="/<?php echo $_image->getUrl() ?>" class="fancybox-img" rel="product-gallery" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="/<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</li>
<?php endforeach; ?>
7) Fertig.
