Modal Kombat! A Lightbox Comparison

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


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.

Framework Dependency: Prototype v1.6.0.2+ / Scriptaculous
Total package size: 26k
License: Creative Commons Attribution 2.5
My Rating: 7/10
Summary: A well-developed and document script; useful for smaller applications, can only be used for images. Has led the way for many developer off-shoots.

 

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.

Framework Dependency: Prototype 1.6+ / Scriptaculous
Total package size: ~43k
License: Creative Commons Attribution-Noncommercial-No Derivative Works
My Rating: 9/10
Summary: Tons of features: Flash, Quicktime, Inline, AJAX, Images. Cool slide show feature. No uncompressed JS distributed which limits or prevents major customizations.

 

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.

Framework Dependency: Prototype.lite/ moo fx
Total package size: ~23k
License: Creative Commons Attribution 2.5
My Rating: 7.5/10
Summary: Very lightweight solution. Suitable for sites where load time is essential. Suffers from lack of updates and like Lightbox2, can only be used for images.

 

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.

Framework Dependency: jQuery 1.1.2
Total package size: ~15k/~10k
License: MIT/GNU
My Rating: 8.5/10
Summary: Extremely small, has compressed / uncompressed, easy to extend, lots of features for such a small package, smooth

 

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.

Framework Dependency: Prototype / Scriptaculous (or mootools)
Total package size: ~32k
License: MIT
My Rating: 9.5/10
Summary:Summary: Easy to use and customize very powerful and well-written code. Versions for Prototype and Mootools. Lots of cool AJAX stuff.

 

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.

Framework Dependency: Mootools 1.1+
Total package size: ~13k
License: MIT
My Rating: 6/10
Summary: A big punch in a small package. Buggy when scrolling but at 13k, this is the IKEA of Lightboxes; nice looking but has

 

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.

Framework Dependency: Mootools 1.1+
Total package size: ~30k
License: MIT
My Rating: 9/10
Summary: One of the best looking and smoothest working in the comparison. Lacks support, suffers from inefficient code, large file size. If file size doesn’t matter and you know that your users have up to date browsers, go for it!

 

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.

Framework Dependency: jQuery 1.2.1+
Total package size: ~15k
License: GNU Affero General Public License
My Rating: 9.5/10
Summary: The smoothest and best overall Lightbox clone in the comparison. Could benefit from more documentation on the site, but it’s so easy to use, that its hard to complain.

 

 

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.

6 comments on “Modal Kombat! A Lightbox Comparison

  1. Fantastic and much needed review (as with all the lightbox choices out there it does become difficult).

    However, for the balupton edition, it does not “yet” support other media types as you have said it does, only images. Later on, I will consider adding more if it becomes a popular request.

    Xiao Z. Jia, IE6 support has been re-added in the latest release (v1.3.0-rc1).

    I have also put some work into the readme.txt to make it a bit easier to understand, as well as providing an options listing and how to, to show the user to customise the lightboxes to their full potential.

    One feature I am quite proud of in the latest release is the automatic scrolling and resizing of images.

    Again, good work, and thanks.

  2. Good article, helped me in my search for a good lightbox solution.

    HOWEVER: the one that you gave a lot of praise for – jQuery Lightbox Plugin (balupton edition), has dropped support for IE6 for its recent releases (which fixes a bunch of browser bugs), which I only found out after I’ve done some work on it.

    It is a total turnoff and I now have to look for another solution.

  3. Ben,
    Thanks for the comprehensive comparison. I am currently debating what lightbox to use on my website. Do you have a strong preference regarding scriptaculous vs. mootools? Do you anticipate one achieving dominance over the other?

    I see that you prefer Lightview. My only reservation is that it is not “open,” and also somewhat heavier than mootools.

    Also, what do you think of shadowbox?

  4. Stevie,

    I am sure that there are other solutions, but from the list above, you could use Multibox or MOOdalBox. Between the two, I favor MOOdalBox because it is a better written application and is very easy to modify. Also, I don’t know what you need to do with the modal but you could always place the SWF in a page can call it using the AJAX method or even as inline content.