With the following steps, you can easily and relatively quickly integrate a nice lightbox for the product detail view in Magento online shops. Here, we decided to use the jQuery-based Fancybox.
However, this guide should also serve as a rough template for integrating other lightbox variants. Implemented in Magento 1.7.0.2.
1) Download the Fancybox files.
2) Create a file named default.js in which Fancybox is initialized, making sure to use "noConflict":
jQuery.noConflict();
jQuery(document).ready(function(e) {
jQuery('.fancybox-img').fancybox();
});
3) Copy the JavaScript files (jquery.js, fancybox.js, and the default.js file just created) into the template folder \skin\frontend\TEMPLATENAME\default\js\.
4) Copy the CSS file and images into the folder \skin\frontend\TEMPLATENAME\default\css\fancybox\.
5) Include the required files in \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) Integrate Fancybox into the product detail view of the Magento shop in the file \app\design\frontend\TEMPLATENAME\default\template\catalog\product\view\media.phtml:
The "product-image-zoom" class should look approximately like this:
<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>
The following foreach loop should then look like this:
<?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) Done.
