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.
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:
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.
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:
jquery.prettyPhoto.js
to your JS skin folder skin/frontend/bookstore/default/js/
.prettyphoto.css
to your css
folder./images/prettyphoto
folder. The prettyPhoto
folder includes the images for all the themes that you can use.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>
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:
<?php $_product = $this->getProduct(); $_helper = $this->helper('catalog/output'), ?>
<!—- 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.
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.
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; ?>
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.
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>
Done! You now have a custom product page zoom and a gallery!
3.15.143.181