JavaScript Frameworks have gained wide acceptance among developers since the "Web 2.0" movement and have, in many ways, changed how we use the web. One of the greatest outcomes of this has been the reduction in external popup windows in favor of unobtrusive, JavaScript-based "Modal Window" and "Lightbox" solutions. At work, clients frequently ask us to incorporate content and image overlay solutions into their projects and after experimenting with, and customizing a wide variety of different scripts, I decided to write a comparison of several of the most popular Light Box solutions.

For this comparison, I have evaluated the Light Boxes based on coding techniques, ease of use / customization, community support and frequency of updates. Additionally, I have listed specifications for file size and framework dependency / version for each along with my rating on a 1-10 scale.

The Scripts chosen for this comparison are as follows:

• Lightbox 2   
• Lightview  
• Litebox  
• Thickbox  
• Modalbox  
• Slimbox  
• Multibox  
• jQuery Lightbox Plugin (balupton edition)  

Lightbox 2

The original Lightbox is considered by many to be the first modal window widely available to developers. The latest release, version 2 , like its predecessors, is based on the Prototype framework and uses Scriptaculous effects. This script is very stable, has seen frequent bug fixes and off-shoots throughout its existence and has a very active user-driven support forum. The JavaScript file itself is very nicely documented and offers many configurable options.

Although Lightbox 2 offers the advantage of a large following and easy to configure (and understand) code it does have limitations. The script is called by using the rel attribute which limits its functionality for non-basic methods such as Flash and image maps. Additionally, this script, unlike most others in this comparison, is only capable of displaying images. Update: after some poking around, I found a lightbox clone which appears to be nearily identical to Lightbox 2, but with the ability to display Flash movies natively. For more information, visit this link.

Lightview

Lightview is a somewhat unique take on the standard Lightbox. Smartly written, with an image-free, fully adjustable, rounded corner solution (which works on browsers across the board), Lightbox is a very aesthetically pleasing and also very powerful solution. Unlike the standard Lightbox, and many of it’s clones, Lightview’s content box scrolls with the page so that you are never left wondering where the content is. In addition to images, Lightview also offers the ability to display Flash, Quicktime, AJAX calls, inline content and even full web sites in an i-frame. Lightview features a very neat image gallery option which can be used as a timed (configurable) slide show, which resizes the content box to the dimensions of each image. Another great thing, which I consider a big advantage over most of the competition, is that the Lightview window is called through the class attribute.

One major issue that I have found with Lightview is that, beyond the configuration settings, the script comes pre-compressed with no original source code attached. This causes major headaches when trying to change anything not in the settings or CSS. I encountered this limitation when developing the new version of my site in the portfolio section when I wanted to add two simple hyperlinks to the Lightview window. Although I was able to add the links, I had to place the links in the title attribute, which does not validate as XHTML.

Litebox

Litebox is basically a compact version of Lightbox. Although listed below as ~23k, which is a mere 3k less than the original Lightbox, the true saving is with the compact, 4k Prototype.lite and moo fx libraries used instead of the conventional 120k+ standard Prototype library and somewhat bulky Scriptaculous files. Litebox is a great, lightweight solution but unlike its older, and slightly pudgy sibling, Lightbox 2, this script does not seem to be frequently updated. The last updated date from the Litebox JS file is July, 2006 compared to March 2008 (at the time of this comparison) with Lightbox 2.

Thickbox

Thickbox was written in the lightweight jQuery framework and weighs in at an amazing 10k compressed and only 15k uncompressed. Additionally, the developer wrote the script to run with the compressed version of jQuery which only adds 20k instead of the 120k+ with Prototype. The script does not have the community-driven support forums that the previous three scripts have but the author states that you may email him with detailed questions or bugs. Thickbox does not offer a lot of the customization options seen in Lightbox, Lightview etc… But does provide both an uncompressed and compressed version for developers to extend at will. The "out of the box" appearance for Thickbox is not as aesthetically pleasing as some of it’s alternatives but keeping with its easily extendable theme, images and CSS can be added as desired to alter the look. One annoyance that I found was, when activated, the mouse scroll wheel becomes inoperative which requires you to use the browser’s side scroll bar.

Thickbox offers quite a few features for such a small package including inline content, i-frame as well as both single and multiple image support. The author claims that both Flash and PDF files can work with this script but notes that these media types are untested.

Modalbox

Modalbox is a very powerful tool which allows the developer to not only show single page content or images like many other modal windows but perform complex tasks with AJAX call backs which allows the end user to perform multiple tasks with few clicks and no browser refreshes. Unlike similar scripts, Modalbox uses AJAX instead of deprecated i-frames and even supports scrolling. The project is supported in Google Code and has a Wiki as well as detailed information about uses, bugs, etc…

I have used this for multiple client projects and have have received positive feedback with not hitches during the development process. One potential issue with Modbalbox is that it relies on Prototype and Scriptaculous which can be a little heavy for large scale projects but for those cases, there is a mootools clone called MOOdalBox which has the same Google Code backing and support.

Slimbox

Slimbox is a mootools clone of Lightbox 2. The entire script plus images and CSS is amazingly only 13k uncompressed. This project has support forums and the homepage for the project allows visitors to post comments in which the author often responds to questions. After playing around with this script, I was impressed with the small file size but found the overall package to be somewhat buggy, particularly with the dark page cover when scrolling.

Multibox

Multibox is a versatile Lightbox that is able to display a large variety of different media types including images, audio (Real Player, MP3), video (Windows Media Player and QuickTime, FLV), as well as the standard image and content (AJAX and inline). The default design is pleasant enough that most developers won’t need to do aesthetic modifications but doing so would be fairly easy due to the way the script was written.

The code is fairly straightforward but is not as well structured as some of the other options; one thing that caught my eye was the use of JavaScript to print the actual HTML code for the box. In other scripts, this is done dynamically at the savings of dozens of lines of code. It also appears that there is no form of support (or update log) for this script so it looks like bug fixes could be an issue.

jQuery Lightbox Plugin (balupton edition) 1.0

This jQuery plugin, based on Lightbox2 delivers unusually smooth scrolling (far better than Lightbox2) as well as many efficiency benefits and a small file size. Unlike many of the other scripts in this comparison, this plugin requires no configuration and a smart automatic URL detection which means that only one file has to be included in the display file. The jQuery Lightbox Plugin can be used manually or automatically to generate Lightboxes which means that it can be set, like many others with the rel attribute or with on event such as onclick. This is a huge advantage and makes The jQuery Lightbox Plugin potentially the most versatile in this comparison. Additionally, most media types can be used without modification including Qucktime, Flash and other embedded content types.

The only real downside that I found with this script was the lack of clear documentation. Although the instructions are fairly clear, it takes some digging around to find the information you are looking for. Luckily, this script is listed on the jQuery plugin site which includes support request and bug report sections as well as a log of changes.

Other considerations and Conclusions

One additional script that was too task specific to include in this comparison but I wanted to include a link. GMapsOverlay is a moo-tools based Lightbox that is used specificially to display configurable Google Maps.

Although I have listed the file sizes for the scripts evaluated in this comparison, some of which are more attractive than others, further compression can be applied to most of these scripts using applications such as: DoJo Toolkit’s ShrinkSafe or Packer.

So, after reading all of this, which one of these Lightboxes is right for you? That depends—I typically use Prototype because I have worked with it in the past quite often—but, there are many alternatives and clones using other JavaScript Frameworks or none at all so it depends on your specific need. Keeping that in mind, it is possible to use multiple frameworks together.