Adding Lightbox to magento V2
This is an old revision of the document!
checked with Magento 1.0
1. Download Lightbox from: |
http://www.huddletogether.com/projects/lightbox2/
Don’t use the current one. Take this version: http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.03.3.zip
Because the current one doesn’t work with the prototype version of magento.
2. Copy the lightbox to magento |
Create a directory: /js/lightbox
and copy the lightbox.js file to this directory
Copy lightbox.css to /skin/frontend/default/default/css/
Create a diretory /skin/frontend/default/default/images/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(/skin/frontend/default/default/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(/skin/frontend/default/default/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(/skin/frontend/default/default/images/lightbox/nextlabel.gif) right 15% no-repeat; }
Please note: on my server /skin/ stays under document root. If you have installed magento into a subdirectory of document root, for example into a directory “magento” you have to write: /magento/skin/...
Open: /js/lightbox/lightbox.js
Replace:
var fileLoadingImage = "images/loading.gif"; var fileBottomNavCloseImage = "images/closelabel.gif";
with:
var fileLoadingImage = "../images/lightbox/loading.gif"; var fileBottomNavCloseImage = "../images/lightbox/closelabel.gif";
4. Insert javascript and stylesheet into magento |
open /app/design/frontend/default/default/layout/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>
5. Insert lightbox into magento product details |
Open /app/design/frontend/default/default/template/catalog/product/view/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; ?>
Thats it!
Any questions?
Feel free to ask!
Sebastian Enders
enders ( at ) comvos.de
**EDIT FROM CHIARAWEB** |
I will edit this page because any instructions not works for me: the path in js file is not correct because in this place you need to write an absolute path to your root directory
then the path to change in lightbox.js is not this:
../images/lightbox/loading.gif ../images/lightbox/closelabel.gif
but this:
/your-magento-folder/skin/frontend/default/default/images/lightbox/nextlabel.gif /your-magento-folder/skin/frontend/default/default/images/lightbox/closelabel.gif
with your code the browser search the labels in a wrong link
Cheers Chiaraweb Italy
