There are several implementations of Lightbox. In a series of articles, I have covered three of them. The first, Shedding some light on Lightbox, covers the original implementation of Lightbox. The second one, Greybox, Lightbox Part 2, explains how you can use Greybox to display a web page in a div. In the last installment, we saw Thickbox 3.1, which can be used to display modal dialog boxes.
What is Lightbox?
"Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."
Though this quote has been pulled out from Lokesh Dhakar's implementation of Lightbox, it holds true for all its implementations. For more about Lightbox, read the first part of this series here.
Let us look at some of the usual uses of Lightbox.
If you want to display multiple photos in slideshow mode, you will need to implement that yourself. This implementation doesn't provide any transitions. I came across a site once that used this implementation of Lightbox with a Flash module to handle the slideshow.
Inline Content and Modal Dialog Box
The beauty of this implementation is that is does the bare minimum. It creates 2 divs: one that darkens the background and the other in which you can put whatever HTML you like. Let us look at a few examples:
How It Works
<head>...</head>section of your page or save it in another file and link to it.
Here is the CSS for the Lightbox implementation. You will need to download close.png. I usually put it in a folder at the top level called
images/, but you can put it anywhere you like. Only remember to specify the correct path in the following styles:
a#close:hover. In case you find the overlay too transparent, you can change the opacity levels in the styles below.
- Now Lets Use It
Note: The second line of the code adds the button to close the hide the Lightbox div. Clicking outside the div also hides it if the Lightbox instance is not modal (more on this later).
As mentioned earlier, this implementation of Lightbox can be used to display any HTML in the Lightbox div. In the example above, I have demoed the login form, but you can put anything you like.
There are two types of dialog boxes: regular and modal. A regular dialog box works like the Lightbox examples above except that it doesn't have a close button in the corner to hide it. You need to click on a button like in any dialog box or click outside the Lightbox div. A modal dialog box is useful when you want to make sure the user clicks on the button. Clicking outside the Lightbox div won't hide it.
Link for regular dialog box:
Link for modal dialog box:
I hope you find Lightbox useful and that this series has given you a good overview of four of its implementations. There are several others on the cloud, but I picked these since I have either used them myself or found them to be better than the others.