top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to add Lightbox2 in magento?

+1 vote
496 views
How to add Lightbox2 in magento?
posted Jul 29, 2015 by Vrije Mani Upadhyay

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

2 Answers

0 votes
 
Best answer

LightBox2 is a fully customizable and ready-to-use extension to take control of your products' images and showing up them in a wonderful and well-managed way.

How to Download LightBox2
http://www.magentocommerce.com/magento-connect/lightbox2.html
https://github.com/lokesh/lightbox2/archive/master.zip
https://github.com/lokesh/lightbox2/

Steps To Add Lightbox To Magento Theme
1. Make a directory called /lightbox under /skin/frontend/default/default/js/ and copy the entire lighbox code under that directory.
2. 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.
6. Changing Lightbox default’s As Per Your Magento Theme

Change Image Directory Location Of The Lightbox
Once 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

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

and replace it with

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

I hope it would be helpful for you, however I would like you to post any comment if have any issue.

answer Jul 29, 2015 by Salil Agrawal
+1 vote

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.

answer Jul 12, 2016 by Magento_ocodewire
...