Adding LightWindow V2.0 on Magento 1.2.1
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 |
- Download LightWindow: http://www.stickmanlabs.com/lightwindow/lightwindow.zip and unzip it.
- Copy from the extracted archive lightwindow/javascript/lightwindow.js to your skin/js directory
(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:
- overlay : {
- opacity : 0.7,
- image : 'images/black.png',
- presetImage :'images/black-70.png'
- },
and replace with:
- overlay : {
- opacity : 0.7,
- image : SKIN_URL + '/images/black.png',
- presetImage : SKIN_URL + '/images/black-70.png'
- },
Similar change must be done at line 207 (again for notepad lovers) find:
- loading : '<div id="lightwindow_loading" >'+
- '<img src="images/ajax-loading.gif" alt="loading" />'+
- '<span>Loading or
and replace with:
- loading : '<div id="lightwindow_loading" >'+
- '<img src="' + SKIN_URL + '/images/ajax-loading.gif" alt="loading" />'+
- '<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
Add:
- <action method="addItem"><type>skin_js</type><name>js/lightwindow.js</name></action>
- <action method="addItem"><type>skin_css</type><name>css/lightwindow.css</name></action>
somewhere inside this block:
- <default>
- <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
- <block type="page/html_head" name="head" as="head">
- <action method="addJs"><script>prototype/prototype.js</script></action>
- [...]
- ----->
- <action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
- [...]
- </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
find:
- <script type="text/javascript">
- //<![CDATA[
- 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>
and replace with
- <script type="text/javascript">
- //<![CDATA[
- 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>
and now the file media.phtml in /app/design/frontend/<your theme>/<your skin>/template/catalog/product/view
find:
- <?php foreach ($this->getGalleryImages() as $_image): ?>
- <li>
- <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>
- </li>
- <?php endforeach; ?>
and replace with:
- <?php foreach ($this->getGalleryImages() as $_image): ?>
- <li>
- <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();?>">
- <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; ?>
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.
- <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:
- <param name="wmode" value="transparent" />
And add this attribute to the <embed> tag:
- wmode="transparent"
a working version can be found at our e-shop Ekomama
— Antonio (Turistiamo) 2009/02/21 09:20
