Drupal "Lightbox" Type Module Comparsion

[This post is now in the Drupal handbook where it will be kept up to date: http://drupal.org/node/266126]

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 could be a very powerful tool once there's an official release available and with the addition of a couple of more features. 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

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 they can display flash content in the lightbox.

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.

Integration with other Drupal Modules

Notes:

1. jQuery Lightbox: It says it has support for imagecache, but using it with imagecache 2 causes a fatal error that prevents the entire site from functioning as it can't find the _imagecache_get_presets() function.

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.

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.

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.

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.
• 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.
• 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.
• It says it has support for imagecache, but using it with imagecache 2 causes a fatal error that prevents the entire site from functioning - it can't find the _imagecache_get_presets() function.
• 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.
• 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:

• Resize and drag features for images which are too large to fit in the browser window.
• Inclusion of keyboard shortcuts for navigating through images and closing the lightbox.
• Has a nice "continuous galleries" feature which allows the user to navigate from the last image in a gallery back to the first.
• Ability to group HTML content (iframes), not just images.
• Highly configurable, including low-level settings such as changing the opacity value of the overlay, the speed of the animation resize effects and the ability to alter the keyboard shortcuts.
• The "per-node configuration options" on the "Future Plans" list is something that I would be quite interested in and imagine others would be too.
• Adherence to CSS standards.
• Running it through the Coder module only 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, especially in the configuration settings area. The addition of a Drupal handbook page for the module would be good.
• Add integration with Drupal's various image modules. I note that this is on the "Future Plans" list and it will be great addition to the module.
• When viewing a narrow image, the "previous" link and the image count text often disappears out of view. This should be easily fixable by introducing a minimum width for the lightbox.
• 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. It might be an idea to add a check to ensure the user has installed this software and produce a warning in the "status report" if it's not.

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.