Adding Lightbox to magento V2

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

This is an old revision of the document!

checked with Magento 1.0 and 1.1.1

1. Download Lightbox from:

Don’t use the current one. Take this version:

Because the current one doesn’t work with the prototype version of magento.

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

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="addJs"><script>lightbox/lightbox.js</script></action>
  2. <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. <action method="addJs"><script>mage/cookies.js</script></action>
  3. <action method="addJs"><script>lightbox.js</script></action>
  4. <action method="addCss"><stylesheet>css/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 )