“Lightbox” scripts for web pages

By now you’ve probably seen a “lightbox” effect somewhere on the Web – even if, like me, you didn’t know the name for it. “Lightbox” is the term widely used for that neat effect where a web page displays an image by popping it up into an overlaid box and dimming out the background. You can generally click or hit a key to dismiss the lightbox overlay. The fancier ones offer a variety of display options, and things like the ability to display a group of images in the lightbox as a slideshow. I started looking for information on how to produce this effect because I want to use the technique within our installation of Confluence. I found there are quite a number of these libraries, each with different features, strengths and weaknesses. I thought I’d take this blog post to go over what I found. All of these tools, by the way, are created with a mixture of Javascript and CSS. In general, you deploy them by linking to both the Javascript and the CSS file from your web page, then putting one or two special attributes (like a “rel” attribute or a CSS class) into the tagging for the content you want to display in the lightbox. Some of these libraries are intended for use only with images, while others allow you to display other things, like inline content, or even content from another page altogether, which is what I was after.

The original Lightbox

The original Lightbox script, by Lokhesh Dhakar, is now updated and called Lightbox 2. The web page has good examples of its use. This script is only for images and image sets, so I did not investigate it further. The display seems very clean and elegant. Like many, though not all, of these toolkits, it uses some third-party JS libraries (the Prototype framework and the Scriptaculous library). It doubtless makes a lot of sense to leverage these toolkits, but it also means sending more code to the browser and can get complex if you’re integrating into a framework like Confluence.

Thickbox

As I said, a number of these scripts are images-only. I wanted to pop up an entirely separate web page in the box. So I moved on, to Cody Lindley’s Thickbox. This script can display ANY sort of content in the popup. There’s lots to like here in terms of functionality. I ultimately decided not to use it for two reasons: firstly, the CSS appeared to have a bad effect on my Confluence site CSS (though later investigation suggests I may just have needed to restart Confluence), and the typography, styling and display were not quite as slick as some of the others. In fairness, the author makes it plain that he created the script as a proof of concept, and it is readily amenable to tweaking, polishing, etc. The basic functionality seems very sound. Thickbox also uses an additional JS library, in this case the also-very-popular jquery.

Slimbox

Slimbox, by Christophe Beyls, bills itself as a more efficient (hey, when it did become the style to write that as “more-efficient”? That drives me nuts) Lightbox clone. Like Lightbox, it is images-only. It uses jQuery instead of Prototype and Scriptaculous. It claims to be heavily optimized and a good bit faster. Clicking through the examples lends some credence to this, but many factors could play into that. Like other scripts, this one is well documented and free.

Lytebox

The script I finally settled on (and believe me there were many more I did not get to looking at) is called Lytebox, by Markus Hay. Lytebox ultimately filled the bill for me for the following reasons:

• Not limited to images
• Entirely self-contained JS and CSS, does not require inclusion of entire libraries, which could further bloat the already sizable JS/CSS payload coming down from Confluence.
• Nice-looking design

I dropped Lytebox into my Confluence install (ok, to be more accurate, I dropped it in via the all-important Theme Builder plugin I use to customize Confluence CSS and JS) and it Just Worked.

Hopefully this brief overview of Javascript “lightbox” technologies has been helpful. And if you do a Google search you’ll find dozens more links on this topic.