Adding Lightbox to magento V2

Last modified by Ravikumar N B on Thu, June 24, 2010 16:42
Source|Old Revisions  

This is an old revision of the document!

Checked with Magento 1.0, 1.1.1. Checked also with 1.1.6 in Modern Theme

1. Download Lightbox

version 2.04 works fine in Magento 1.1.6.

Comment: For me, IE crashed with the message “Operation aborted” ( Magento 1.1.6 & Lightbox 2.04 ).
To fix the problem I had to Downgrade lightbox to ver 2.03

Unzip folder.

2. Copy the lightbox to magento

Go to /skin/frontend/default/default/js/

Create a directory: /lightbox

and copy the lightbox.js file to this directory

NOTE Put lightbox.js in /magento/js/lightbox/ directly if it doesn’t work for you. At least in Magento 1.1.6 this is the case. The js is found in the root /js/ folder instead of the local template.

Copy lightbox.css to /skin/frontend/default/default/css/

Go to /skin/frontend/default/default/images/

Create a directory /lightbox/

and copy all images from the lightbox into it.

3. Change image directory location of the lightbox

Open: /skin/frontend/default/default/css/lightbox.css



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


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


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


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


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


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

Open: /skin/frontend/default/default/js/lightbox/lightbox.js


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


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

Open: /app/design/frontend/default/default/template/page/html/head.phtml

In head.phtml find

<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') ?>';

replace with

<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('') ?>';

4. Insert javascript and stylesheet into magento

Open: /app/design/frontend/default/default/layout/page.xml

In page.xml insert into

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

the following code:

  1. <action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
  2. <action method="addCss"><stylesheet>css/lightbox/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. <action method="addJs"><script>mage/cookies.js</script></action>
  3. <action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
  4. <action method="addCss"><stylesheet>css/lightbox/lightbox.css</stylesheet></action>
  5. <action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
  6. ...

5. Insert lightbox into magento product details

Open /app/design/frontend/default/default/template/catalog/product/view/media.phtml

In media.phtml replace:

  1. <?php foreach ($this->getGalleryImages() as $_image): ?>
  2.   <li>
  3.      <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=200,height=200,resizable=yes');return false;">
  4.      <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()) ?>"/>
  5.      </a>
  6.   </li>
  7. <?php endforeach; ?>


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

6. Refresh Cache

Log into Admin Dashboard then System > Cache Management and be sure to change All cache setting from No change to REFRESH and then click the Images Cache - Clear button

Thats it!

Any questions?

Feel free to ask!

Sebastian Enders

enders ( at )

IF THE ABOVE DOES NOT WORK (and it didn’t for me v1.1.2) try this

Also, you can try putting in absolute URLs for the images when editing lightbox.js as putting in what has been advised (i.e. putting SKIN +...) can break the script.

[edit] Works fine with Lightbox 2.04, Modern Theam and Magento 1.1.6 - However I had to put lightbox.js in /js/lightbox/ folder, not /skin/frontend/default/default/js/


Go to: /js Create a directory: /lightbox and copy the lightbox.js file to this directory

Also my uploads went into ...frontend/default/modern... instead of ...frontend/default/default...

[edit] For me on Version 1.1.6 with modern theme, I need to change on “app/design/frontend/default/modern/layout/page.xml” Replace: <action method=”addCss”><stylesheet>css/lightbox.css</stylesheet></action>

To: <action method=”addCss”><stylesheet>css/lightbox/lightbox.css</stylesheet></action>