How to integrate prettyPhoto in Magento

********** EDIT – I just used prettyPhoto version 3.1.4 on a Magento site and it didn’t need customised at all. The code had been refactored since this was originally written and now works slightly differently **************

If you Google ‘PrettyPhoto Magento’ there’s not much coming up in the results (in Sept 2011). A whole dose of links to some paid-for extensions in Magento Connect which have dead links to the demo page, and links to a ‘360 degree’ extension which contains a demo which doesn’t seem to involve prettyPhoto.

So I suppose I better write one! Including prettyPhoto in Magento turned out to be prettyEasy, except for one important aspect which I’ll cover at the end. Let’s go ->

Lets Get Started

First of all you need to include the prettyPhoto CSS and JS in the header section of the page.xml layout file. The CSS file references an images folder with the prettyPhoto images, so include that in your theme’s CSS folder.

<action method="addJs"><name>jquery.prettyPhoto.js</name></action>
<action method="addCss"><stylesheet>css/prettyPhoto.css</stylesheet></action>

Next up you need to add the JavaScript which fires the prettyPhoto() function when an image with rel=”prettyPhoto” is encountered.

I included the following code at the bottom of template/page/html/footer.phtml

<script type="text/javascript" charset="utf-8">
	var $j = jQuery.noConflict(); 

	$j(document).ready(function(){
   
		$j("a[rel^='prettyPhoto']").prettyPhoto({
			theme: 'light_square'
		});
   
	});
</script>

We then need to change the catalog/product/view/media.phtml file to include prettyPhoto and get rid of the default zoomer.

    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<p class="product-image">
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <h2><?php echo $this->__('More Views') ?></h2>
    <ul>
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="prettyPhoto" ><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; ?>
    </ul>
</div>
<?php endif; ?>

The key to this is that I had real problems trying to get prettyPhoto to work in gallery mode. Normally you’d use rel=”prettyPhoto[pp_gal]” or something. It doesn’t matter what’s contained with the square brackets, the main prettyPhoto.js file just does a regex on the contents and groups the ones that are the same.

I could not get this to work at all in Magento (anyone knows why, answers on a postcard). In the end the workaround I used was to change the main prettyPhoto.js file so that it stopped using the regex on the square brackets (line 104 onwards, see the commented out code below). Notice the line;

$('a[rel*=' + theGallery + ']').each(function (i) {

has been changed to;

$("a[rel^='prettyPhoto']").each(function (i) {

The code changes are (note this is prettyPhoto version 2.5.6) ;

        $(this).each(function () {
            $(this).bind('click', function () {
                _self = this;
                theRel = $(this).attr('rel');
                galleryRegExp = /[(?:.*)]/;
                theGallery = galleryRegExp.exec(theRel);
                var images = new Array(),
                    titles = new Array(),
                    descriptions = new Array();
               // if (theGallery) {
                    $("a[rel^='prettyPhoto']").each(function (i) {
                        if ($(this)[0] === $(_self)[0]) setPosition = i;
                        images.push($(this).attr('href'));
                        titles.push($(this).find('img').attr('alt'));
                        descriptions.push($(this).attr('title'));
                    });
               // } else {
                //    images = $(this).attr('href');
                //    titles = ($(this).find('img').attr('alt')) ? $(this).find('img').attr('alt') : '';
                //    descriptions = ($(this).attr('title')) ? $(this).attr('title') : '';
               // }
                $.prettyPhoto.open(images, titles, descriptions);
                return false;
            });
        });