Adding lightbox.js To Magento
Adding Lightbox to your magento theme is not difficult and by adding very little code to your theme you can get the Lightbox functionality easily. Lightbox will give the ability to highlight your products by showing lager image of the product along with brief description. Our approach will be based on default layout, you can change the theme name based on your selection.
Steps To Add Lightbox To Magento Theme (Prerequisites)
Following are the steps to add Lightbox to your Magento Theme
Download Lightbox from click here to download
Step1:
Create directory called /lightbox under /skin/frontend/default/default/js/ and copy the entire lighbox code under that directory.
Once done, your directory will look like /skin/frontend/default/default/js/lightbox (all code under this directory)
copy the lightbox.js under /magento/js/lightbox (create a folder under js directory and name it lightbox).
If you installation is under root directory then copy it under /root/js/lightbox
Step2:
Now, you should copy the lightbox.css to /skin/frontend/default/default/css directory.
Create a folder called lightbox under /skin/frontend/default/default/images. Your directories for images will finally look like /skin/frontend/default/default/images/lightbox. Copy all the images from source lightbox directory here.
Changing Lightbox default’s As Per Your Magento Theme
Lightbox is free open source JavaScript library to suit any kind of environment. In order to use Lightbox with Magento we have to change few default settings by assigning your theme’s original path. Following are few changes which you have to make in order to install Lightbox with your Magento theme installation.
How To Change Image Directory Location Of The Lightbox
Soon after you are done with the above pre-requisites change the following code by editing /skin/frontend/default/default/css/lightbox.css
find the following line of code
[css]
background: transparent url(../images/blank.gif) no-repeat;
[/css]
and replace it with
[css]
background: transparent url(../images/lightbox/blank.gif) no-repeat;
[/css]
Now find the following line of code
[css]
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
[/css]
and replace it with
[css]
#prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }
[/css]
Find the following line of code
[css]
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
[/css]
and replace it with
[css]
#nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }
[/css]
Now, lets make few changes in the lighbox.js file which will be found under /skin/frontend/default/default/js/lightbox/lightbox.js
Edit this JS file with your favorite editor and find the following line of code
[js]
fileLoadingImage: ‘images/loading.gif’,
fileBottomNavCloseImage: ‘images/closelabel.gif’,
[/js]
and replace these lines with this
[js]
fileLoadingImage: SKIN_URL + ‘images/lightbox/loading.gif’,
fileBottomNavCloseImage: SKIN_URL + ‘images/lightbox/closelabel.gif’,
[/js]
Now, change the head.phtml file which will be found under /app/design/frontend/default/default/template/page/html/head.phtml
Edit this file using your favorite editor and find the following line of code
[js]
<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>
[/js]
replace this code with the following line of code
[js]
<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>
[/js]
Step3:
Adding Stylesheet & JavaScript To Your Magento Installation
Open page.xml from /app/design/frontend/default/default/layout/page.xml using your favorite editor.
Under the following line of code
….
Add this
[xml]
<action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
<action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>
[/xml]
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:
[xml]
<action method="addJs"><script>mage/cookies.js</script></action>
<action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
<action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>
<action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
[/xml]
How To Add Lightbox To Magento Product Detail Page
Edit media.phtml from /app/design/frontend/default/default/template/catalog/product/view/media.phtml using your favorite editor
Find the following line of code
[php]
<?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; ?>
[/php]
and replace the above lines with this
[php]
<?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; ?>
[/php]
By following above three steps i was able to add lightbox in my project hope you will get some help from it. Happy Coding
