|
Adding Lightbox to magento - V2
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
-----------------------------------------------------------
comvos online medien
TYPO3 and Magento commerce
Mannheim, Germany
|
