The Lightest Lightbox | WebReference

The Lightest Lightbox

By Arpan Dhandhania

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.

CSS-only Solution*

* with a pinch of JavaScript

Today we are going to look at the lightest implementation of Lightbox. While it is stripped of all the bells and whistles, you are free to add them if you like. It requires no JavaScript frameworks, only a few lines of JavaScript to open and close the Lightbox.

Let us look at some of the usual uses of Lightbox.

Photos

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

  1. JavaScript
    As I have already mentioned, this implementation doesn't require any libraries. All it needs is about 20 lines of JavaScript to show and hide the Lightbox. You can either add this code in the <head>...</head> section of your page or save it in another file and link to it.
  1. Style
    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, a#close:hover. In case you find the overlay too transparent, you can change the opacity levels in the styles below.
  1. Now Lets Use It

    We have the JavaScript and CSS in place. Now let us use Lightbox. The code is divided into 3 parts: the lightbox div, the overlay div and the link to show the Lightbox div. No matter how many Lightbox instances you have on the page, you will need only one overlay div. The lightbox div and the link will depend of the usage of Lightbox. Here is the code for the overlay div.
  • Photos

Lightbox div:

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).

Link:

Note: ShowLightBox() is a JavaScript function that takes the ID of the corresponding Lightbox div as parameter.

  • Inline Content
    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.


Lightbox div:

Link:
  • Dialog Boxes
    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.

Lightbox div:

Link for regular dialog box:

Link for modal dialog box:

Conclusion

With this implementation, I conclude the series on Lightbox. Of the four Lightbox implementations that I have covered, this one is my favorite for the simple reason that it is so light and flexible. You can visit the official homepage of this Lightbox implementation on Emanuele Feronato's blog. He has titled the post "Create a Lightbox Effect only with CSS - No JavaScript Needed". Though the title is a little misleading, I am certain that it has attracted way more attention than "Create a Lightbox Effect with CSS and a pinch of JavaScript" or something along those lines would have.

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.