Comparison of Lightbox-type modules

There are many "box" scripts freely available on the net. To get an initial idea of which box is suitable for you, http://planetozh.com/projects/lightbox-clones might help you to pick some candidates.

There are various modules in Drupal which provide "lightbox" type functionality. These modules usually use JavaScript to overlay images on the current page when clicked upon, which has the advantage of being able to show users the large version of a thumbnail image while keeping them on the same page. However, there are a number of these modules available, each quite similar but some have more features, while others are more lightweight or have better browser support.

This article attempts to do a comparison between these modules to allow you to choose which one best suits your needs. For the purposes of this comparison, the "lightbox" type functionality where content can be displayed in a container overlayed on the current page, whether it be for images, iframed content or videos, shall be referred to as a "lightbox".

If any of the information is incorrect or out of date, please let me know and I will do my best to update or correct it.

I should point out that I'm the current maintainer of the Lightbox2 module but I'm aiming to produce an unbiased and fair comparison below.

Available Modules

There are quite a few modules that provide lightbox functionality. Below is a list of the ones I found and shall compare, but there may be others that I've missed.

• Lightbox2 - supports images, grouped images, slideshow images, videos and HTML content. It also supports a wide number of Drupal's various image modules. Older versions (4.7.x and 5.x-1.x) used the prototype and script.acolu.ous libraries, but has since been re-written to take advantage of the jQuery library now included in Drupal core.
• jQuery Lightbox - a port of the Lightbox2 project which uses jQuery. It was released a few days before Lightbox2's own jQuery version. It has fewer features and configuration options, which may be advantageous to some users.
• Thickbox - a wrapper for the jQuery "thickbox" plugin and includes image and iframed content support. It also provides integration support for Drupal's image, imagecache and imagefield modules.
• Shadowbox - a nice module which works well and will be a very powerful tool with the addition of integration with more Drupal media modules. The only disadvantage is that it depends on 3rd party software.
• Greybox Redux - this module shows HTML content (websites) in a lightbox, but doesn't have any support for image content.

I won't be including the following modules in my comparison:

• DBFM Greybox - this module does nothing on it's own, but is required by the Database File Manager (DBFM) module to display pop-up windows. I'm not including this in the comparsion as it's specifically only for the DBFM module.
• Slidebox - this module allows you to select a View which "slides in" from the top of the browser window on specified pages. It doesn't provide "true" lightbox functionality which I would consider to be where the user clicks on something and a lightbox is opened. This lightbox is triggered on page load and is specifically for showing Views in a lightbox. Therefore, I'm not going to include it in my comparison. However, for those who are interested, I've included it in the browser support section below.
• Slideshow - this isn't actually a lightbox module. From reading the project page I was a bit unsure because it says that it can show the slideshow above the page content, but by this it means at the top of the page, rather than in a lightbox overlay. I've included it in some of the overview tables below for those who are interested.

Overview

Module Overview

Module	Versions			Documentation	Demo Site	Last Update
	4.7.x	5.x	6.x
Lightbox2				Handbook pages README.txt	http://www.stellapower.net/lightbox2	2008-Jun-29
jQuery Lightbox				README.txt		2008-Feb-24
Thickbox	dev			README.txt	http://jquery.com/demo/thickbox/	2008-Sept-12
Shadowbox				README.txt	http://mjijackson.com/shadowbox/	2008-Jul-29
Greybox Redux				README.txt	http://jquery.com/demo/grey/	2007-Jul-15
DBFM Greybox						2008-Apr-03
Slidebox		dev				2007-Dec-17
Slideshow				README.txt		2006-Dec-25

Feature Overview

For reference, "grouped images" means that you can group images together and manually navigate between them using "next" and "previous" buttons. A "slideshow" means it's possible to group images together and have the browser automatically traverse through them without clicking any buttons, usually accompanied by a play/pause feature. "Video" support means either that they can display flash content in the lightbox or video in a player within the lightbox.

Module	Images	Grouped Images	Image Slideshow	HTML Content	Inline Content	Videos	Multilingual Support
Lightbox2
jQuery Lightbox
Thickbox				1		2
Shadowbox							3
Greybox Redux

Notes:

1. Thickbox: the documentation says it supports HTML content via the use of iframes. While I managed to get this to work with some sites, it didn't work with others including google.com. I believe this is because of the addition of GET parameters to the url.
2. Thickbox: in theory it should be possible to view videos in a thickbox, but it's not enough to just provide it with a link to a video. It works quite nicely with Embedded Media Field videos though where the emfield module creates the embed object and inserts it into thickbox's iframe.
3. Shadowbox: multilingual support is available in the 5.x-1.0 version. 5.x-2.0 moves language support from the module to Shadowbox itself and proper options will be added to allow translation in the near future. Multi-lingual support will be added to the 6.x-1.x-dev version when it has a full release.

Integration with other Drupal Modules

Module	Lightbox2	jQuery Lightbox	Thickbox	Shadowbox	Greybox Redux
Image
Imagecache		1
Imagefield
Image Assist
Embedded Media Field (images)
Embedded Media Field (videos)
Inline
Gallery 2
Flickr
Acidfree Albums (images)
Acidfree Albums (videos)
Brilliant Gallery
FileField

Browser Support

Some of this information was taken from the module's documentation, others I had to test in order to determine which browsers were supported. Just because a browser is listed below doesn't mean that the browser is actively supported, but that the results of my tests show that current latest version (listed above) of the module behaves without any problems.

Note: Netscape 9.x is listed below, but AOL official support for this browser ended on 1st March 2008.

Windows

Browser	Lightbox2	jQuery Lightbox	Thickbox	Shadowbox	Greybox Redux	Slidebox
Firefox (ver 2.x, 3.x)
IE 7
IE 6					2
IE (earlier)	1
Opera (ver 9.2x, 9.5x)
Safari (ver 3.x)
Flock (ver 1.2)
Seamonkey (ver 1.1.9)
K-Meleon (ver 1.1.5)
Avant (ver 11.6 bd 13)
Netscape (ver 9.x)

Notes:

1. Lightbox2: IE 5.5 and earlier are only supported in Drupal 5.x. This is because the version of jQuery in Drupal 6.x no longer supports these browsers.
2. Greybox Redux: Clicking the overlay in IE 6 doesn't close the lightbox as expected.

Mac OS

Browser	Lightbox2	jQuery Lightbox	Thickbox	Shadowbox	Greybox Redux	Slidebox
Firefox (ver 2.x, 3.x)
Safari (ver 2.x, 3.0)
Camino (ver 1.6)		?	?		?	?
Flock (ver 1.2)

Linux / BSD

Browser	Lightbox2	jQuery Lightbox	Thickbox	Shadowbox	Greybox Redux	Slidebox
Firefox (ver 2.x, 3.x)
Opera (ver 9.2x, 9.5x)
Flock (ver 1.2)
Seamonkey (ver 1.1.9)
Epiphany (ver 2.22.1.1)
Kazehakase (ver 0.5.2)
Midori (ver 0.0.17)
Galeon (ver 2.0.4)
Konqueror (ver 3.5.9)
Netscape (ver 9.x)

Notes:

1. Konqueror currently no longer supports their proprietary -khtml-opacity setting, but still hasn't added support for the CSS3 opacity property. This will hopefully be added in KDE4.

Coding Standards

The following information shows how standards compliant these modules are.

Module	Drupal Standards	CSS 2 / 2.1	CSS 3
Lightbox2		1	1
jQuery Lightbox
Thickbox		2	2
Shadowbox
Greybox Redux		2	2
Slidebox
Slideshow

Notes:

1. Lightbox2 fails the CSS standards test as it provides backwards compatibility for browsers which do not support the opacity CSS3 property. Older versions of Mozilla and Opera browsers require -moz-opacity, older Safari and Konqueror browsers require -khtml-opacity, while older IE browsers require filter.
2. Thickbox and Greybox partially fail the CSS standards test because of the same opacity property support discussed in the previous point.

File Size

Detailed Analysis

Lightbox2

Benefits over other modules:

• Choice of two layouts, in addition to a lightweight version with a reduced set of features.
• Inclusion of keyboard shortcuts for navigating through images, closing the lightbox, pausing the slideshow, etc.
• Resizes images to fit within the browser window (if enabled) but also provides a zoom-in feature to see the original size.
• Ability to group HTML content (iframes), not just images.
• Slideshow support.
• Inline / modal content support.
• Control over which image size should be displayed in the lightbox.
• Page exclusion capability so you can prevent the lightbox functionality from working on certain pages of your site.
• Skin and animation configuration so you can adjust the order and speed of the lightbox animations, along with the lightbox colors, border size and overlay opacity.
• Neat feature where you can have the Drupal login form appear in a lightbox by clicking upon a link.
• Right-to-left language support.
• Highly configurable, perhaps too much so.
• Good documentation and demo site.
• Running it through the Coder module produces no errors or warnings. Adhering to the Drupal coding standards doesn't mean that the code works but is usually a sign of a well maintained module.

Disadvantages or areas in need of improvement:

• The configuration pages are possibly just too complicated for the average user and might be off-putting. However documentation is provided and the default settings should work for the majority of users' needs.
• Doesn't adhere to CSS standards, though this is because it provides backward compatibility for older browsers which don't support the CSS3 opacity property.

jQuery Lightbox

Benefits over other modules:

• A lightweight version of the Lightbox2 module.
• Adherence to CSS standards.
• Inclusion of keyboard shortcuts for navigating through images, closing the lightbox, pausing the slideshow, etc.
• Running it through the Coder module produces no errors or warnings. Adhering to the Drupal coding standards doesn't mean that the code works but is usually a sign of a well maintained module.

Disadvantages or areas in need of improvement:

• No configuration page whatsoever - though this may be favoured by some users.
• No "loading" image.
• Poor documentation and no help information was provided with the module via a call to hook_help().

Thickbox

Benefits over the other modules:

• Inclusion of keyboard shortcuts for navigating through images and closing the lightbox.
• Resizes images to fit within the browser window.
• Inline / modal content support.
• Very neat feature where you can have the Drupal login form appear in a lightbox by clicking upon a link.
• Control over which image size should be displayed in the lightbox.
• Page exclusion capability so you can prevent the lightbox functionality from working on certain pages of your site.
• Running it through the Coder module only produces 1 minor warning about a missing @file block in the install file. Adhering to the Drupal coding standards doesn't mean that the code works but is usually a sign of a well maintained module.
• Good documentation available on the jquery site, but not available on drupal.org

Disadvantages or areas in need of improvement:

• The documentation says it supports HTML content via the use of iframes. While I managed to get this to work with some sites, it didn't work with others including google.com. I believe this is because of the addition of GET parameters to the url. The url which failed for me was "http://www.google.com/?KeepThis=true&TB_iframe=true&height=400&width=600".
• No ability to view the original larger version for images that were resized to fit within the browser window.
• When viewing narrow images, the caption, image count and navigation links are quite squished which makes it difficult to click on the navigation links, if not impossible. The close link also overlaps the image count.
• Doesn't adhere to CSS standards, though this is partially because it provides backward compatibility for older browsers which don't support the CSS3 opacity property.
• The documentation on drupal.org is ok at best. The only documentation I found was on the jquery site. The "read documentation" link on the project page just points to the readme file, perhaps it should be changed to point at the docs on the jquery site. However I would prefer a page added to the Drupal handbook. There's no documentation on the configuration options and no help information was provided with the module via a call to hook_help().

Shadowbox

Overall it's a nice module which looks good and works quite well.

Benefits over the other modules:

• Adherence to CSS standards.
• Resize and drag features for images which are too large to fit in the browser window.
• Skins allow changes to the style and structure of the interface.
• Inclusion of keyboard shortcuts for navigating through media items, closing the lightbox, pausing the slideshow, etc.
• Many media extensions supported.
• Has a nice "continuous galleries" feature which allows the user to navigate from the last image in a gallery back to the first.
• Multiple types of media items can be grouped into a gallery.
• Slideshow support.
• Support for image maps using the area tag.
• Inline / modal content support.
• Highly configurable including animation, overlay, gallery, movies, input control and media handling options.
• Options for controlling which media types to open in the lightbox.
• Ability to open a few media types in the JW FLV Player rather than default.
• Smart plugin detection mechanism displays a helpful link to download the required software.
• Page exclusion capability so you can prevent the lightbox functionality from working on certain pages of your site.
• Running it through the Coder module produces no warnings or errors. Adhering to the Drupal coding standards doesn't mean that the code works but is usually a sign of a well maintained module.

There's a couple of areas however, that I would see as disadvantages or areas for improvement - most of these can be overcome and indeed one of them is listed in the "Future Plans" section of the project page.

• The user guide documentation could be improved. The addition of a Drupal handbook page for the module would be good.
• Add integration with more of Drupal's various image modules.
• The dependency on 3rd party software is a drawback in my mind. For example, if there's a bug in the 3rd party software, the shadowbox maintainer can't really do much about it but wait for it to be fixed and re-released before Drupal users can benefit. However, nothing can be done about this and assuming the 3rd party software is reliable and has active development, I don't see it as a major stumbling block.

Greybox Redux

Benefits over other modules:

• A lightweight lightbox module, with not too many features to confuse users.

Disadvantages or areas in need of improvement:

• No keyboard shortcut for closing the lightbox that I could find.
• No grouping of lightbox content.
• I found it a bit "jerky" and if you scroll down a page and then click on a link, you have to scroll back up to see the greybox. The overlay also doesn't cover the entire page, just the first part visible in the browser window.
• There is no automatic resizing of the lightbox for different size images.
• The documentation is very poor. It's not clear what type of content is supported or which browsers. No help information was provided with the module via a call to hook_help().
• Doesn't adhere to CSS standards, though this is partially because it provides backward compatibility for older browsers which don't support the CSS3 opacity property.
• Running it through the Coder module produces 11 minor warnings, which isn't bad but could easily be fixed. Adhering to the Drupal coding standards doesn't mean that the code works but is usually a sign of a well maintained module.