• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

Description: Lightbox JS is an elegant, unobtrusive script that overlays a larger version of an image on the current page for display when clicked on- an image thumbnail viewer if you will. It's a snap to setup and works on all modern browsers.

Demo: (links are set to open in a popup window):

Nice mountain view

Directions

Step 1: Insert the below code in the HEAD section of your page:

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>

Step 2: Create your "thumbnail" HTML code. Three basic flavours are supported:

<a href="dog.jpg" rel="lightbox" ><img src="dog_thumb.jpg" /></a>

<a href="cat.jpg" rel="lightbox" title="Caption- cute cat!"><img src="cat_thumb.jpg" /></a>

<a href="dan.jpg" rel="lightbox" title="My best friend Dan">Dan</a>

As you can see, the thumbnail code just consists of a standard <A> tag with its "href" attribute set to the image to show, an extra attribute rel="lightbox" to separate this link from ordinary links, and finally, an optional "title" attribute that will show a caption if set. You're free to use either a thumbnail image or text link as the interface to launching the enlarged image.

Step 3: Last but certainly not least, this script is made up of a few external files/images, as referenced in the code of Step 1. Download lightbox.zip, and upload its contents to a folder on your site. Then make sure the paths used in the code of step 1 correctly points to this directory. FYI, lightbox.zip contains these files:

• lightbox.js - the main script.
• lightbox.css - basic style and tricky PNG support.
• overlay.png - 80% opacity, black tile used to create shadow.
• loading.gif - mock status bar used in examples above.
• close.gif - 'X' graphic placed in top-right corner.

That's it! Enjoy this superb script.

Notes

Inside lightbox.js, there are two configurable variables:

var loadingImage = 'loading.gif'; //path to the "loading animation" image
var closeButton = 'close.gif'; //path to the "close" button image