Table of Contents

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

1. Download Lightbox

http://www.huddletogether.com/projects/lightbox2/

version 2.04 works fine in Magento 1.1.6.

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

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

and

replace: 


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

with: 


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

Replace: 


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

with: 


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

Replace: 


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

with: 


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

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

Replace: 


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

with: 


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

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

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

with:

  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 ) comvos.de

IF THE ABOVE DOES NOT WORK (and it didn’t for me v1.1.2) try this http://www.magentocommerce.com/boards/viewreply/31397/

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.