Comparison of Lightbox-type modules

Last updated April 15, 2013. Created by Matt V. on June 3, 2008.
Edited by DD 85, frjo, ParisLiakos, hansfn. Log in to edit this page.

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".

The Overview section is a few years out of date (written at the time of Firefox 3.x and IE 7) with the exception of the Module Overview table which is current as of May 2012. The Available Modules section is also current as of May 2012.

This article was written by the current maintainer of the Lightbox2 module but aims to provide an unbiased and fair comparison.

Available Modules

There are quite a few modules that provide lightbox functionality. Below is a list of the ones which were compared in detail (ordered below by install count).

• 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. This module is minimally maintained and under active development.
• 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. The Drupal 6 version of this module is actively maintained but will not be developed any further. The module maintainers recommend Colorbox for Drupal 7.
• 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. This module is seeking a co-maintainer and under active development.
• 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. But jQuery Lightbox more compatible to newer jQuery version, if u experience problem using jQuery Update (which using latest jQuery js) then try this module instead Lightbox2. This module's maintenance and development status are unknown.
• Greybox - this module shows HTML content (websites) in a lightbox, but doesn't have any support for image content. This module's maintenance and development status are unknown.

The following modules were not included in the detailed comparison but mentioned in the Module Overview table for reference (ordered below by install count):

• Colorbox - integrates the Colorbox plugin with Drupal. It is a lightweight customizable lightbox plugin for jQuery 1.3 and 1.4., and has integration with Imagefield, Imagecache, Insert and Image modules and several other modules has built in support for it. Colorbox is available for Drupal 6 and Drupal 7. This module is actively maintained and under development.
• Fancybox - provides the Fancybox jQuery plugin for displaying images (support for HTML and multimedia content is planned) in an elegant Mac-style box. This module is actively maintained and under development, though not yet stable.
• 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. Slideshow is seeking a new maintainer and will not be developed any further.
• YoxView - a Lightbox-inspired jQuery plugin which has many different features, including next/previous caching of images, keyboard acccess support, is very configurable, and uses jQuery 1.4. For more information, see the YoxView project page. This module is actively maintained and under development.
• Highslide - implements Highslide JS, an open source image, media and gallery viewer. This module is minimally maintained and will not be developed any further.
• 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.
• Pirobox - makes available the use of the Pirobox jQuery plugin and the jQuery Images Blur plugin. This module is actively maintained and under active development.
• 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 comparison as it's specifically only for the DBFM module.
• PhotoSwipe - uses PhotoSwipe to display picture galleries on your Drupal website. This jQuery-based lightbox library offers very nice mobile browsing features (in particular swiping to the next picture). This module is minimally maintained and will not be developed further.

Overview

Module Overview

Module	Versions			Installs	Documentation	Demo Site	Last Release
	5.x	6.x	7.x
Lightbox2				120978	Handbook pages README.txt	http://www.stellapower.net/lightbox2	2011-Oct-17
Colorbox				132354	README.txt	http://jacklmoore.com/colorbox/	2013-Apr-08
Shadowbox				15438	README.txt	http://shadowbox-js.com/	2013-Mar-22
Thickbox				15160	README.txt	http://jquery.com/demo/thickbox/	2011-Feb-24
Fancybox		dev	dev	2739	README.txt	http://fancybox.net/	2012-Apr-12
Slideshow				1464	README.txt		2009-Apr-05
YoxView				963		http://www.yoxigen.com/yoxview/	2011-Dec-23
jQuery Lightbox				701	README.txt		2011-Feb-24
Highslide				528		http://highslide.com/	2011-Feb-24
Greybox				264	README.txt		2008-Dec-04
Slidebox				119			2012-Mar-26
Pirobox				92		http://www.pirolab.it/pirobox_v_1_2/	2012-Jan-16
DBFM Greybox		dev		34			2011-Feb-24
PhotoSwipe		dev	dev	17		http://www.photoswipe.com/	2011-Aug-23

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

NB! This section is seriously outdated as the version of the various browsers clearly show. Non-existing browsers has been removed, but the rest is kept as reference.

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.

Windows

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

Notes:

1. 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)		?	?		?	?

Linux / BSD

Browser	Lightbox2	jQuery Lightbox	Thickbox	Shadowbox	Greybox Redux	Slidebox
Firefox (ver 2.x, 3.x)
Opera (ver 9.2x, 9.5x)
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)

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.