Adding Incredible Effects to Magento Theme: Creating a custom product images gallery

Magento’s default zoom property to view the products is not at the top of its game. It is very old and, in fact, has been used since the first version of Magento released and the more views images (the additional product images) opens into a pop up.

One of the best practices and the most requested feature by clients is a Lightbox on the product view page that will not open new windows but will display the zoomed image in a better way on the same page.

I usually integrate prettyPhoto in my projects, and now we are going to learn how to integrate it in our theme, overriding the default zoom system. prettyPhoto is a totally free jQuery Lightbox clone plugin that you can integrate in your projects with some simple steps.

We will also learn how to create a switch image if there are multiple images.

1. Planning the work

Now we have to plan what we want to do.

Magento can manage multiple product pictures and display them on the product page. They are called more views and we plan to do the following process:

  • Integrating prettyPhoto to create nice zoom effects for the the main image and thumbnails by clicking on them
  • Creating a custom script that changes the main image while hovering over a thumbnail of the more views block

2. Integrating prettyPhoto into Magento

prettyPhoto is a jQuery Lightbox clone created by Stéphane Caron. It supports almost everything: images, videos, Flash, YouTube, iFrames, and Ajax. It is very simple to integrate and customize, and is also compatible with every major browser.

2.1. Downloading prettyPhoto

You can download prettyPhoto 3.1.5 from http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/. The page that opens should look the same as that shown in the following screenshot:

Open the plugin page and follow the ensuing steps in order to download and integrate prettyPhoto:

  1. Download the minified Production Version 3.1.5. Compressed.
  2. Unzip the files and copy the JS jquery.prettyPhoto.js to your JS skin folder skin/frontend/bookstore/default/js/.
  3. Copy the CSS css to your css folder.
  4. Finally, copy the prettyPhoto images from the /images/prettyphoto folder. The prettyPhoto folder includes the images for all the themes that you can use.

2.2. Integrating prettyPhoto JS and CSS

Now open the local.xml file and add the JS and the CSS. In order to load prettyPhoto only on the product view page, you can place addItem in the action method to declare the JS and addCss to declare the CSS in the <catalog_product_ view> handle as follows:

<catalog_product_view>

<reference name=”root”>

<action method=”setTemplate”>

<template>page/1column.phtml</template></action>

</reference>

<reference name=”head”>

<action method=”addItem”>

<type>skin_js</type>

<name>js/jquery.prettyPhoto.js</name>

</action>

<!– Adding the prettyphoto.css –>

<action method=”addCss”>

<stylesheet>css/prettyPhoto.css</stylesheet>

</action>

</reference>

</catalog_product_view>

Note: If you want to use prettyPhoto for all the themes, simply add the CSS and the JS in the default handle.

2.3. Customizing the media.phtml code

The file that generates the product gallery into the product view page is media.phtml.

As usual, you can copy this file from the base theme or create an empty one in app/design/frontend/bookstore/template/catalog/product/view/. Then follow these steps to customize the file:

  1. First, we get the product information using the following code:

<?php

$_product = $this->getProduct();

$_helper = $this->helper(‘catalog/output’);

?>

  1. Then we create the block for the main image as shown in the following code:

<!—- This is the main product image ->

<p class=”product-image img-thumbnail”>

<?php

$_img = ‘<img id=”product_main_img” src=”‘.$this-

>helper(‘catalog/image’)->init($_product, ‘image’)->resize(500,600).'” alt=”‘.$this-

>escapeHtml($this->getImageLabel()).'” title=”‘.$this->escapeHtml($this-

>getImageLabel()).'” class=”img-responsive” />’;

echo $_helper->productAttribute($_product, $_img,‘image’);

?>

<!—- this link will trigger the prettyPhoto zoom ->

<a id=”zoom” href=”#” class=”visible-md visible-lg”>Zoom Images</a>

</p>

As you can see, we inserted the link <a id=”zoom” href=”#” class=”visible-md visible-lg”>Zoom Images</a> after the main image, which will trigger the prettyPhoto function.

Note: The scope of this link is to make the zoom function accessible only on large devices and not small devices. Note that the visible-md visible-lg Bootstrap classes will show the link only on medium and large devices.

  1. Now, we create the more-views block, which includes all the additional images of the product:

<!—- Display the additionals images of the product ->

<?php if (count($this->getGalleryImages()) > 0): ?>

<div class=”more-views”>

<?php foreach ($this->getGalleryImages() as $_image): ?>

<a href=”#” title=”<?php echo $this->escapeHtml($_image-

>getLabel()) ?>” class=”img-thumbnail”><img src=”<?php echo $this->helper(‘catalog/image’)->init($this-

>getProduct(), ‘thumbnail’, $_image->getFile())-

>resize(56); ?>” rel=”<?php echo $this-

>helper(‘catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(500,600); ?>” width=”56″ height=”56″ alt=”<?php echo $this-

>escapeHtml($_image->getLabel()) ?>” /></a>

<!—this is the hidden link for prettyphoto zoom ->

<a style=”display:none” href=”<?php echo $this-

>helper(‘catalog/image’)->init($this->getProduct(),

‘thumbnail’, $_image->getFile()); ?>”

rel=”prettyPhoto[productGallery]”></a>

<?php endforeach; ?>

</div>

<?php endif; ?>

As you can see, the link that will launch the zoom property is not on the thumbnails but in external hidden links for the same reason described previously: to make the zoom property accessible only on medium and large devices.

In other words, the link with the ID zoom will launch the prettyPhoto gallery when it’s clicked, which is represented by the hidden links inside the more-views block. If the link is hidden, users on mobile phones will not have the capability to launch the zoom.

This is recommended because on a smartphone the user can see the main image that fits the device width and you may not need to zoom in. However, if you want to enable the zoom property for all devices, please remove the CSS class visible-md visible-lg.

The full code of the media.phtml file will look as follows:

<?php

$_product = $this->getProduct();

$_helper = $this->helper(‘catalog/output’);

?>

<p class=”product-image img-thumbnail”>

<?php

$_img = ‘<img id=”product_main_img” src=”‘.$this-

>helper(‘catalog/image’)->init($_product, ‘image’)->resize(500,600).'”

alt=”‘.$this->escapeHtml($this->getImageLabel()).'” title=”‘.$this-

>escapeHtml($this->getImageLabel()).'” class=”img-responsive” />’;

echo $_helper->productAttribute($_product, $_img, ‘image’);

?>

<a id=”zoom” href=”#” class=”visible-md visible-lg”>Zoom Images</a>

</p>

<?php if (count($this->getGalleryImages()) > 0): ?>

<div class=”more-views”>

<?php foreach ($this->getGalleryImages() as $_image): ?>

<a href=”#” title=”<?php echo $this->escapeHtml($_image->getLabel())

?>” class=”img-thumbnail”><img src=”<?php echo $this->helper(‘catalog/ image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())-

>resize(56); ?>” rel=”<?php echo $this->helper(‘catalog/image’)-

>init($this->getProduct(), ‘thumbnail’, $_image->getFile())-

>resize(500,600); ?>” width=”56″ height=”56″ alt=”<?php echo $this-

>escapeHtml($_image->getLabel()) ?>” /></a>

<a style=”display:none” href=”<?php echo $this->helper(‘catalog/ image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile());

?>” rel=”prettyPhoto[productGallery]”></a>

<?php endforeach; ?>

</div>

<?php endif; ?>

2.4. Initializing prettyPhoto

Now that the prettyPhoto plugin and the HTML structure are integrated, let’s initialize the JS as follows:

jQuery(“a[rel^=’prettyPhoto’]”).prettyPhoto({

theme: ‘facebook’,

opacity: 0.50

});

prettyPhoto includes a lot of options. Take a look at the theme option. There are six themes to choose from; in this case, we are using the facebook theme with a custom opacity of 0.5 (the default is 0.8).

To launch prettyPhoto, you usually have to click on the link that has the rel=”prettyphoto” attribute, but we will launch it from the zoom link as described earlier. To do this, add the following code to your jquery.scripts.js file:

jQuery(“#zoom”).click(function() {

jQuery(“a[rel^=’prettyPhoto’]:first”).click();

});

In other words, this code will simulate clicking on the first hidden link of the gallery by clicking on the #zoom button.

3. Creating a nice image swap effect for when you hover the cursor over a thumbnail

Now that we have integrated prettyPhoto, let’s learn how to add a simple image-change effect for when you hover the cursor over the thumbnail. The aim

is to show the preview image instantly magnified in the main image box, as shown in the following screenshot:

To get this effect, we create a variable called hoverImg, which contains the rel attribute of the image inside the <a> link that is hovered, and then we assign that link to the src attribute of the main product img as follows:

jQuery(“.more-views a”).hover( function() {

var hoverImg = jQuery(this).find(“img”).attr(“rel”);

jQuery(“#product_main_img”).attr(“src”, hoverImg);

});

The portion of code for the media.phtml file, which is where the effect will show, is as follows:

<a href=”#” title=”<?php echo $this->escapeHtml($_image->getLabel())

?>” class=”img-thumbnail”>

<img src=”<?php echo $this->helper(‘catalog/image’)->init($this-

>getProduct(), ‘thumbnail’, $_image->getFile())->resize(56);

?>” rel=”<?php echo $this->helper(‘catalog/image’)->init($this-

>getProduct(), ‘thumbnail’, $_image->getFile())->resize(500,600);

?>” width=”56″ height=”56″ alt=”<?php echo $this->escapeHtml($_image-

>getLabel()) ?>” />

</a>

Note: The rel attribute of the image contains the link to an image with the same dimensions as the main product image generated by the following code:

<?php echo $this->helper(‘catalog/image’)->init($this-

>getProduct(), ‘thumbnail’, $_image->getFile())-

>resize(500,600); ?>”

Done! You now have a custom product page zoom and a gallery!

Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.

Leave a Reply

Your email address will not be published. Required fields are marked *