====== Adding Lightbox to magento V2 ======

//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.

> Comment: For [[http://www.magentocommerce.com/boards/member/22714/|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


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:
<code>

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

</code>

with:
<code>

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

</code>



Replace:
<code>

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

</code>
with:
<code>

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

</code>



Replace:
<code>

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

</code>
with:
<code>

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

</code>




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


Replace:
<code>

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

</code>

with:
<code>

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

</code>

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

In **head.phtml** find 

<code>

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

</code>

replace with 

<code>

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

</code>



==== 4. Insert javascript and stylesheet into magento ====


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

In **page.xml** insert into

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

the following code: 

<code html>
<action method="addJs"><script>lightbox/lightbox.js</script></action>
<action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>
</code>

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:

<code html>
...
<action method="addJs"><script>mage/cookies.js</script></action>
<action method="addJs"><script>lightbox.js</script></action>
<action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>
<action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
...
</code>



==== 5. Insert lightbox into magento product details ====


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

In **media.phtml** replace:

<code php>
<?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; ?>
</code>



with: 

<code php>
<?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; ?>
</code>


==== 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.