Adding Lightbox to magento V2
This is an old revision of the document!
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 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:
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
- <block type="page/html_head" name="head" as="head">
- ....
- </block>
the following code:
- <action method="addJs"><script>lightbox/lightbox.js</script></action>
- <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:
- ...
- <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>
- ...
5. Insert lightbox into magento product details |
Open /app/design/frontend/default/default/template/catalog/product/view/media.phtml
In media.phtml replace:
- <?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; ?>
with:
- <?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; ?>
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.
[edit] Works fine with Lightbox 2.04, Modern Theam and Magento 1.1.6 - However I had to put lightbox.js in /js/lightbox/ folder, not /skin/frontend/default/default/js/
Hence..
Go to: /js Create a directory: /lightbox and copy the lightbox.js file to this directory
Also my uploads went into ...frontend/default/modern... instead of ...frontend/default/default...
