Author: Mitch Keeler

Have you ever wondered to yourself how some sites out there can bring up those cool photo effects?

For example, if you click on the big screenshot on this site, the background turns black and the image is brought to the center of the screen. This is done with the help of a javascript tool called Lightbox 2. See a few more examples of this web page effect here:

http://www.lokeshdhakar.com/projects/lightbox2/#example

How to Upload Lightbox 2

The first thing you must do is download Lightbox 2 from the official web site for it. Next, unzip it to your computer’s desktop.

You should see a folder named js, a folder named images, and a folder named css. There is also a file named index.html that is used to test to see if Lightbox 2 is working or not. You may want to rename this file to something like “lightboxtest.html” so that you don’t over-write your current index file.

Now, upload the three files and the text page into the folder you wish to use it. If you wish to use it for your main domain, make sure it gets uploaded to the root folder. (for Linux hosting, that would be “public_html” and for Windows hosting, it would be “httpdocs”).

How to Setup Lightbox 2

Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).

Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

How to Use Lightbox 2

Add a rel=”lightbox” attribute to any link tag to activate the lightbox. To add a caption, use the title=”my caption” attribute. For more assistance with how to use Lightbox 2, be sure to check out the official documentation.

Bonus! If you have WordPress installed, and you want an easier way to get this effect, try installing the Lightbox plugin!