The Labs.Com Web Lab JavaScript Lightbox

The Labs - Design & Functionality For The Net

Lightbox, A JavaScript Extension for Popup Images

1. Introduction
2. Download
3. Example
4. Dis/Advantages

I'm not fan on JavaScript, as nothing works as tested, every browser-type has its own API and way to access elements - a real pain. Anyway, this script I found at HuddleTogether.com, and adapted and extended it slightly. There is a version 2.0 available which uses more sophisticated JavaScript and makes things slower I think - so I thought to make my version also available. Extension I made of the "original" lightbox (version 1):

• subtitle support, e.g. subtitle="Picture of me"
• fullsize support, e.g. fullsize="Pics/me-fullsize.jpg"
• nicer "busy" animation (taken from 2.0 and inverted)
• hiding forms & embedded elements like Flash objects (taken from 2.0)

My thanks to Lokesh Dhakar for making the original lightbox available.

Lightbox 2. Download

lightbox.tar.gz (Version 1.003)

Lightbox 3. Example

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

and then

<a href="mountain.jpg" rel=lightbox title="A Mountain" subtitle="© by someone"><img src="mountain-small.jpg"></a>

Click on the image.

Lightbox 4. Dis/Advantages

Advantages: simple usage, works also when JS is not activated

Disadvantage: works only when page is fully loaded

                                                                                                                                   

JavaScript