CSS Magento PHP

Fancybox image gallery for Magento 1.9 product images

By on Saturday, July 28, 2018

Fancybox is a very popular image gallery library. In this blog post, I am going to explain, how we can implement Fancybox library in custom Magento theme.

1. Download the library from http://fancyapps.com/fancybox/3/.

2. Unzip the folder and copy jquery.fancybox.min.js and jquery.fancybox.min.css file and paste both files in your theme skin folder CSS and JS folder.

3. Edit catalog.xml file of your theme layout. You can find code snippet below.
File Path: <magento_root>/app/design/frontend/<your_theme>/default/layout/catalog.xml

If you are not using own catalog.xml file.

Kindly copy Magento base theme catalog.xml file and then edit it. Avoid edit Magento base theme files.

Find Product view XML layout code <catalog_product_view translate=”label”> and add following code snippet inside the <reference name=”head”> tag.


<action method="addItem"><type>skin_js</type><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3Ejs%2Fjquery.fancybox.min.js%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /></action>
<action method="addItem"><type>skin_css</type><name>css/jquery.fancybox.min.css</name></action>

4. Edit media.phtml file of your theme.
File Path: <magento_root>/app/design/frontend/<your_theme>/default/template/catalog/product/view/media.phtml
If your are not using own media.phtml file. Copy file from Magento base theme folder and than edit it.

Use following code snippet and replace with your media.phtml code.


<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');

?>
<div class="product-image product-image-zoom">
<div class="product-image-gallery">
<a data-fancybox="gallery" class="thumb-link" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" title="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"><img id="image-main"
class="gallery-image visible"
src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" /></a>
</div>
</div>

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<h2><?php echo $this->__('More Views') ?></h2>
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<li>
<a data-fancybox="gallery" class="thumb-link" href="<?php echo $this->getGalleryImageUrl($_image); ?>" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
</div>
<?php endif; ?>

<?php echo $this->getChildHtml('after'); ?>

5. For remove duplicate image display in the thumbnail gallery. Use the following code snippet.


<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$main_image = basename($this->helper('catalog/image')->init($_product, 'image'));
?>
<div class="product-image product-image-zoom">
<div class="product-image-gallery">
<a data-fancybox="gallery" class="thumb-link" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" title="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"><img id="image-main"
class="gallery-image visible"
src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" /></a>
</div>
</div>

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<h2><?php echo $this->__('More Views') ?></h2>
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>

<?php $thumb_image = basename($_image->getUrl());
if ($main_image != $thumb_image && $this->isGalleryImageVisible($_image)): ?>
<li>
<a data-fancybox="gallery" class="thumb-link" href="<?php echo $this->getGalleryImageUrl($_image); ?>" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
</div>
<?php endif; ?>

<?php echo $this->getChildHtml('after'); ?>

 

0
Related Posts