Have you ever wondered how people are showing larger images for products on mouseover or mouse click using lightbox (very popular JavaScript library). Adding Lightbox to your magento theme is not difficult and by adding very little code to your theme you can get the Lightbox functionality easily. Lightbox will give the ability to highlight your products by showing lager image of the product along with brief description. Our approach will be based on default layout, you can change the theme name based on your selection.

Steps To Add Lightbox To Magento Theme (Prerequisites)

Following are the steps to add Lightbox to your Magento Theme

1. Download Lightbox from here
2. Make a directory called /lightbox under /skin/frontend/default/default/js/ and copy the entire lighbox code under that directory. Once done, your directory will look like /skin/frontend/default/default/js/lightbox (all code under this directory)
3. copy the lightbox.js under /magento/js/lightbox (create a folder under js directory and name it lightbox). If you installation is under root directory then copy it under /root/js/lightbox
4. Now, you should copy the lightbox.css to /skin/frontend/default/default/css directory.
5. Create a folder called lightbox under /skin/frontend/default/default/images. Your directories for images will finally look like /skin/frontend/default/default/images/lightbox. Copy all the images from source lightbox directory here.

Changing Lightbox default’s As Per Your Magento Theme

Lightbox is free open source JavaScript library to suit any kind of environment. In order to use Lightbox with Magento we have to change few default settings by assigning your theme’s original path. Following are few changes which you have to make in order to install Lightbox with your Magento theme installation.

How To Change Image Directory Location Of The Lightbox

Soon after you are done with the above pre-requisites change the following code by editing /skin/frontend/default/default/css/lightbox.css

find the following line of code

1

background: transparent url(../images/blank.gif) no-repeat;

and replace it with

1

background: transparent url(../images/lightbox/blank.gif) no-repeat;

Now find the following line of code

1

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

and replace it with

1

#prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }

Find the following line of code

1

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

and replace it with

1

#nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }

Now, lets make few changes in the lighbox.js file which will be found under /skin/frontend/default/default/js/lightbox/lightbox.js
Edit this JS file with your favorite editor and find the following line of code

1
2

fileLoadingImage: 'images/loading.gif',     
fileBottomNavCloseImage: 'images/closelabel.gif',

and replace these lines with this

1
2

fileLoadingImage: SKIN_URL + 'images/lightbox/loading.gif',     
fileBottomNavCloseImage: SKIN_URL + 'images/lightbox/closelabel.gif',

Now, change the head.phtml file which will be found under /app/design/frontend/default/default/template/page/html/head.phtml
Edit this file using your favorite editor and find the following line of code

1
2
3

<script type="text/javascript">var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
</script>

replace this code with the following line of code

1
2
3

<script type="text/javascript">var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>';</script>

Adding Stylesheet & JavaScript To Your Magento Installation

Open page.xml from /app/design/frontend/default/default/layout/page.xml using your favorite editor.

Under the following line of code

1
2
3

<block type="page/html_head" name="head" as="head">
         ....
</block>

Add this

1
2

<action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
<action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>

AFTER the prototype.js. It is recommended to add the two lines where the list of js and css files intersect so it will look something like this:

1
2
3
4
5
6

     ...
<action method="addJs"><script>mage/cookies.js</script></action>
<action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
<action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>
<action method="addCss"><stylesheet>css/reset.css</stylesheet></action
    ...

How To Add Lightbox To Magento Product Detail Page

Edit media.phtml from /app/design/frontend/default/default/template/catalog/product/view/media.phtml using your favorite editor

Find the following line of code

1
2
3
4
5

<?php foreach ($this->getGalleryImages() as $_image): ?>
<li><a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=200,height=200,resizable=yes');return false;">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68,68); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/></a>
</li>
<?php endforeach; ?>

and replace the above lines with this

1
2
3
4

<?php foreach ($this->getGalleryImages() as $_image): ?>
<li><a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/></a>
</li>
<?php endforeach; ?>

Now, you are all set. You will see the Lightbox opening up for your product images. Leave me a comment and let me know if you run into any difficulty.