Adding LightWindow V2.0 on Magento 1.2.1

Last modified by Turistiamo on Thu, August 12, 2010 02:19
Source|Old Revisions  

This is an old revision of the document!

Since I’ve tried lightbox, Trickbox and whatever-box having more fun trying to fix it than to have good results I’ve tried myself to find a new *box and install it from zero!

So here is a fast and small tutorial about adding LightWindow V2.0 to my magento installation

Please Note: I’ve tried only the image and image gallery. Up to you (or me) test the other features

Part 1 - Download and copy

(if you don’t have it, create it) usually the path would be [...]/skin/frontend/<your theme>/<your skin>/js

  • Copy css/lightwindow.css to your skin css

[...]/skin/frontend/<your theme>/<your skin>/css (if you don’t have it, create it)

  • copy all images/* to your skin images [...]/skin/frontend/<your theme>/<your skin>/images

Now that all the files we need are on the server.. let’s close the archive and keep it for some other site ;-)

Part 2 - Change the script and the CSS

Unlike the other *box, LightWindow is more nasty and we have to work a bit more to make it work ;-)

open in your skin css the lightwindow.css file and change nothing!!! Ok you can close it! it’s the easy way

open in your skin js the lightwindow.js file and here we have some change:

at line 156 and 157 (you don’t have the line numbers in your editor?? ok for the friends of notepad) find:

  1. overlay : {
  2.     opacity : 0.7,
  3.     image :  'images/black.png',
  4.     presetImage :'images/black-70.png'
  5. },

and replace with:

  1. overlay : {
  2.     opacity : 0.7,
  3.     image : SKIN_URL + '/images/black.png',
  4.     presetImage : SKIN_URL + '/images/black-70.png'
  5. },

Similar change must be done at line 207 (again for notepad lovers) find:

  1. loading :     '<div id="lightwindow_loading" >'+
  2. '<img src="images/ajax-loading.gif" alt="loading" />'+
  3. '<span>Loading or

and replace with:

  1. loading : '<div id="lightwindow_loading" >'+
  2. '<img src="' + SKIN_URL + '/images/ajax-loading.gif" alt="loading" />'+
  3. '<span>Loading or

Here we go! next step!

Part 3 - Change magento layout xml file

Note: if you don’t find the file we are changing in your skin subs it means that you use the theme one’s. To make it work copy the file from the default skin to your skin (or change your default one.. it’s up to you) Remember: if you copy a file from the default theme location to another skin you MUST (MUST!!!) replicate the directory path = create the missing directories

Let’s change page.xml that should be in /app/design/frontend/<your theme>/<your skin>/layout


  1. <action method="addItem"><type>skin_js</type><name>js/lightwindow.js</name></action>
  2. <action method="addItem"><type>skin_css</type><name>css/lightwindow.css</name></action>

somewhere inside this block:

  1. <default>
  2.         <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
  4.             <block type="page/html_head" name="head" as="head">
  5.                 <action method="addJs"><script>prototype/prototype.js</script></action>
  6. [...]
  7. ----->
  8.                 <action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
  9. [...]
  10. </block>

Part 4 - Change the .phtml files

Note: same as step 3

Let’s change head.phtml in app/design/frontend/<your theme>/<your skin>/template/page/html


  1. <script type="text/javascript">
  2. //<![CDATA[
  3.     var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
  4.     var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
  5. //]]>
  6. </script>

and replace with

  1. <script type="text/javascript">
  2. //<![CDATA[
  3.     var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
  4.     var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
  5.     var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>';
  6. //]]>
  7. </script>

and now the file media.phtml in /app/design/frontend/<your theme>/<your skin>/template/catalog/product/view


  1. <?php foreach ($this->getGalleryImages() as $_image): ?>
  2.   <li>
  3.     <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
  4.   </li>
  5. <?php endforeach; ?>

and replace 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()); ?>" class="lightwindow" rel="[<?php echo $_product->getName()?>]" 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; ?>

Part 5 - Clear Cache

If your magento cache is activated you have to refresh it from administration go to System → Cache Management → All cache → Refresh and Save

Note - Customise LightWindow

Please refer to LightWindow V2.0 for the options to be added at the code here like title, gallery, author, size etc.

  1. <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" class="lightwindow"  title="<?php echo $_product->getName();?>">

Note - Flash overlaying LightWindow fix

If you find that there are Flash movies that ‘shine through’ LightWindow, ensure that you have the following added to the Flash <object> and <embed> :-

Add this element within the <object> tag:

  1. <param name="wmode" value="transparent" />

And add this attribute to the <embed> tag:

  1. wmode="transparent"

a working version can be found at our e-shop Ekomama

Antonio (Turistiamo) 2009/02/21 09:20