How To Add Lightbox To Magento Theme

magento-lightbox-installation-guide

Have you ever wondered how people are showing larger images for products on mouseover or mouse click using lightbox (very popular JavaScript library). 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 here
Make a 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
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

1	background: transparent url(../images/blank.gif) no-repeat;

and replace it with

1	background: transparent url(../images/lightbox/blank.gif) no-repeat;

Now find the following line of code

1	#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

and replace it with

1	#prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }

Find the following line of code

1	#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

and replace it with

1	#nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }

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

1 2	fileLoadingImage: 'images/loading.gif', fileBottomNavCloseImage: 'images/closelabel.gif',

and replace these lines with this

1 2	fileLoadingImage: SKIN_URL + 'images/lightbox/loading.gif', fileBottomNavCloseImage: SKIN_URL + 'images/lightbox/closelabel.gif',

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

1
2
3

<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 this code with the following line of code

1
2
3

<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>

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

1
2
3

<block type="page/html_head" name="head" as="head">
         ....
</block>

Add this

1 2	<action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></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="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
    ...

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 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; ?>

and replace the above lines with this

<?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; ?>

Now, you are all set. You will see the Lightbox opening up for your product images. Leave me a comment and let me know if you run into any difficulty.

we3bus

Thanks for the thorough how-to. Got this to work on the first try with your tutorial.
Graham Dodd

Great tutorial. Got it working in FireFox perfectly. However, in Internet Explorer, and product page that has custom options will not open at all. There seems to be some sort of conflict.
Do you have any advice on this??

Thanks
Wade H

Worked great! Thanks!
http://sureshkvnec.wordpress.com/2009/11/27/how-to-add-lightbox-to-magento-theme/ How To Add Lightbox To Magento Theme « Web Developer Blog

[...] Click Dere to read full article [...]
harishrawat

hi whenever i use light box as according you i havent get it .
its not display product image in lightbox
http://www.magentomagik.com/ MagentoMagik

Hello Harish,

What is the error when you add lightbox? We have tested this and found no problem. You must have missed a vital step for sure. Let me know the url of your site so that i can check.
harishrawat

Hi,
Thanks now its working should i know how can we configure paypal in my magento
my site is software application site we remove all physical shipping address and method from
magento then we enable paypal in admin and when we try to buy any application and proceed to payment it give me alert error like “Requested Payment Method is not avilable”

i don't know how i can remove this alert Error and configrue paypal standard in my site.

Thanks & Regards
Harish Rawat
Migital
magik_Tejas

Hi,

To integrate Paypal Express checkout you need to follow steps below-
1.) Login to magento admin panel.
2.) In System > configuration > General section set your Locale options here.
3.) Go to System > configuration > Payment Methods > Paypal Express checkout option
Here set following -
* Enabled: Yes
* Payment Action: Sale (actual transfer of funds)
* New Order Status: Processing (the order will be paid instantly through Paypal)
4.) Finally you need to set the paypal url from System > configuration > Paypal Accounts > Website Payments Pro and Express Checkout (API Signature)
Here you need to add your API username, password,signature & paypal URL

Paypal Settings are as follows -
1.) Login to your paypal account.
2.) In My account go to profile link it will take you to profile summary page. Here click on the link API Access under Account Information column.
3.) In API Access page click on “view API certificate” it will take you to a page where you can see a radio button with option Request API Signature. Check this radio button & submit will give you API deatils which you need to fill in magento Paypal Accounts.

Hope this helps you.

Thanks
Rekha

i implemented custom portfolio page and in this page i have difficulty to implement lightbox.
plz help me.
http://www.hurricanesoftwares.com Ashish

You should test whether the page you have created (custom portfolio) is calling css/lightbox.css or not. CSS files are important so check twice. Use Firebug to test the CSS.
http://ww.ftfmedia.net/ Chris

Amazing tut! Worked perfect on the first try! Thanks a lot
http://ww.ftfmedia.net/ Chris

Amazing tut! Worked perfect on the first try! Thanks a lot
http://treespun.com/ Rob

background: transparent url(../images/blank.gif) no-repeat;

In the lightbox.css file does not exist — downloaded it twice just to be sure.
riti

@rob,

no need for background: transparent url(../images/blank.gif) no-repeat;

it works fine by following other instructions.

Thanks,
Riti
http://developmentblog.vitahorizon.com/?p=8 Add Lightbox To Images in Magento « Enovou's Development Blog

[...] <Source MagentoMagik> [...]
http://www.makeuseof.com/dir/filedropper-store-share-large-5gb-files/ multiple image upload flash

Great points regarding upload files for having me personally get moving. I will keep this specific website link and come back to it.
http://onlinevoucher.net/ Kayleen Visor

I most certenly liked your angle that you have on the subject. I wasnt thinking on this at the time I started browsing for tips. Your ideas was totally simple to understand. Happy to find out that there’s an person here that gets it on the spot what its is talking about.
http://porphinsomnia.com Brett Garnes

I have developed a blog and and i want to change the theme.I got some ideas from here! You could visit my website and tell me your opinion!
http://twitter.com/Designergianna gianna

Thanks for sharing this link with us, I have learnt some of the stuff from this post and also saved some of the coding part also, will make sure to implement it on my PC, and test it whether it is working fine..ecommerce web developer
http://magicfish.net frenky

FCl7Jt http://gdjI3b7VaWpU1m0dGpvjRrcu9Fk.com
http://howtoeswork.com Esta Kaiama

Nobody is doing anything about this. I’ve gotten scammed out of perfectly good money for using unlicensed locksmith
http://www.adadadadadadadajhgf.com Ward Ferster

I thought it was extremley helpful, don’t understand some people, just ignore them and keep on doing great work.
http://twitter.com/WisdomQuality WisdomQuality

It works, THANKS YOU VERY MUCH!
Ajendra Singh

i want to show the confimation,success,error messages in a lightbox popup or in an alert window.
is this possible in magento,please help..

thanks in advance
http://www.adodis.com/Ecommerce-Solutions.php Ecommerce Solutions

That was really so great to learn this code with the best presentation.
Cameron

Thanks very much for your instructions. I have tried following your instructions in installation of Magento 1.5.1 with Lightbox 2.0.5, but it’s not working for me.
Are there any changes that should be considered in these versions? An update with the latest instructions would be fantastic.

Cameron
GOSH! digital
http://www.goshdigital.com
Vishalsanwar

HI,
When i right click on my image,light box should not be open.
but it happens in firefox not other browser.
plz help me

THanx
Vishal

Get updates via email:

What is Magik?

We Build beautiful magento themes, powerful extensions and customized backend tools and integration for Magento powered ecommerce store to deliver Amazon like intelligent shopping experiences.

How To Add Lightbox To Magento Theme

Steps To Add Lightbox To Magento Theme (Prerequisites)

Changing Lightbox default’s As Per Your Magento Theme

How To Change Image Directory Location Of The Lightbox

Adding Stylesheet & JavaScript To Your Magento Installation

How To Add Lightbox To Magento Product Detail Page

Contact Sales

408-394-7557