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

  1. Download Lightbox from here
  2. 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)
  3. 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
  4. Now, you should copy the lightbox.css to /skin/frontend/default/default/css directory.
  5. 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:

1
2
3
4
5
6
     ...
<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

1
2
3
4
5
<?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

1
2
3
4
<?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!

  • Pingback: How To Add Lightbox To Magento Theme « Web Developer Blog

  • 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

  • Pingback: Add Lightbox To Images in Magento « Enovou's Development Blog

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

  • Amits Innovaminds

    hello there

    this code is very nice and your description is also very good . please tell me one more thing can we show image and product details in popup please help . :)

    Amit Singh

  • http://www.web-designs-company.com/ web design company

    The codes you presented are so useful…thanks for this informative psot.

  • http://www.spiralaxis.com/ Web Application Development

     I am still learning magento and this post and also your blog got so many informative posts which really helping me in learning new things in development.

  • http://www.magikcommerce.com/ Ashish @Magento Themes

    That’s strange but i would advise you to figure out if there is any conflict with other plugins or JS scripts.

  • Vishalsanawar

    Again getting issue in light box:
    I added light box it is working fine but I want some customization.
    1) When we click on more view images it replace base image  then it will open in light box.
    2) Next and prev also working with this.

    I have completed first point but facing problem in second point,

    Thanks
    Vishal

  • Vishalsanwar

    We are getting issue in light box:

    I added light box it is working fine but I want some customization.

    1) When we click on more view images it replace base image  then it will open in light box.

    2) Next and prev also working with this.

    I have completed first point but facing problem in second point,

    Thanks

    Vishal
     

  • http://www.fmeextensions.com/ Magento Modules

    Can we use this light box for accepting PayPal payments!

  • http://www.joomla-developers.com/ pavanraj

    Very nice to see your code and also your description gave great idea for us. Thanks for sharing great article to us.