Comparison of "lightbox" type modules

Last modified: October 8, 2008 - 10:51

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 Yes Yes Yes Handbook pages
README.txt
http://www.stellapower.net/lightbox2 2008-Jun-29
jQuery Lightbox No Yes No README.txt 2008-Feb-24
Thickbox dev Yes dev README.txt http://jquery.com/demo/thickbox/ 2008-May-18
Shadowbox No Yes dev README.txt http://mjijackson.com/shadowbox/ 2008-Jul-29
Greybox Redux No Yes No README.txt http://jquery.com/demo/grey/ 2007-Jul-15
DBFM Greybox No Yes No 2008-Apr-03
Slidebox No dev No 2007-Dec-17
Slideshow Yes Yes No 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 Yes Yes Yes Yes Yes Yes Yes
jQuery Lightbox Yes Yes No No No No No
Thickbox Yes Yes No Yes1 Yes No2 Yes
Shadowbox Yes Yes Yes Yes Yes Yes Yes3
Greybox Redux Yes No No Yes No No No

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 Yes Yes Yes No No
Imagecache Yes Yes1 Yes Yes2 No
Imagefield Yes Yes Yes Yes2 No
Image Assist Yes Yes Yes No No
Embedded Media Field (images) Yes No No No No
Embedded Media Field (videos) Yes No Yes No No
Inline Yes Yes Yes No No
Gallery 2 Yes No No No No
Flickr Yes No No No No
Acidfree Albums (images) Yes No No No No
Acidfree Albums (videos) Yes No No No No
Brilliant Gallery Yes No Yes No No
FileField Yes No No No No

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. See #259471: Update for ImageCache 2 API.
  2. Shadowbox 5.x-1.0 and 5.x-2.0 support imagecache 5.x-2.x and imagefield 5.x-2.x. There is no planned support for imagecache 5.x-1.x. Support for these modules will be added to 6.x-1.x as those modules become stable for Drupal 6.

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) Yes Yes Yes Yes Yes Yes
IE 7 Yes Yes Yes Yes Yes Yes
IE 6 Yes Yes Yes Yes Yes2 Yes
IE (earlier) Yes1 Yes No No Yes No
Opera (ver 9.2x, 9.5x) Yes Yes Yes Yes Yes No
Safari (ver 3.x) Yes Yes Yes Yes Yes No
Flock (ver 1.2) Yes Yes Yes Yes Yes No
Seamonkey (ver 1.1.9) Yes Yes Yes Yes Yes No
K-Meleon (ver 1.1.5) Yes Yes Yes Yes Yes No
Avant (ver 11.6 bd 13) Yes Yes Yes Yes Yes No
Netscape (ver 9.x) Yes Yes Yes Yes Yes No

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) Yes Yes Yes Yes Yes Yes
Safari (ver 2.x, 3.0) Yes Yes Yes Yes Yes No
Camino (ver 1.6) Yes ? ? Yes ? ?
Flock (ver 1.2) Yes Yes Yes Yes Yes No
Linux / BSD
Browser Lightbox2 jQuery Lightbox Thickbox Shadowbox Greybox Redux Slidebox
Firefox (ver 2.x, 3.x) Yes Yes Yes Yes Yes Yes
Opera (ver 9.2x, 9.5x) Yes Yes Yes Yes Yes No
Flock (ver 1.2) Yes Yes Yes Yes Yes No
Seamonkey (ver 1.1.9) Yes Yes Yes Yes Yes No
Epiphany (ver 2.22.1.1) Yes Yes Yes Yes Yes No
Kazehakase (ver 0.5.2) Yes Yes Yes Yes Yes No
Midori (ver 0.0.17) Yes Yes Yes Yes Yes No
Galeon (ver 2.0.4) Yes Yes Yes Yes Yes No
Konqueror (ver 3.5.9) Yes Yes Yes Yes Yes No
Netscape (ver 9.x) Yes Yes Yes Yes Yes No
NetSurf (ver 1.1)
no JS support
No No No No No No

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 Yes No1 No1
jQuery Lightbox Yes Yes Yes
Thickbox Yes No2 No2
Shadowbox Yes Yes Yes
Greybox Redux No No2 No2
Slidebox No No Yes
Slideshow No Yes Yes

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

Module Javascript (kB) CSS (kB)
Lightbox2 36 (basic)
44.8 (auto image handling enabled)
43.2 (video enabled)
52 (all enabled)
12 (lite)
4.3 (default layout)
3.4 (alternative layout)
1.2 (lite)
jQuery Lightbox 5.77 1.8
Thickbox 12.7 3.6
Shadowbox 32.3 (all enabled) 0.9
Greybox Redux 1.3 0.93

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.
  • 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. See #259471: Update for ImageCache 2 API.
  • 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.

IE compatibility, HTML in image captions

mvc - June 23, 2008 - 18:30

Thanks for this handy comparison chart. Two more points for site developers to keep in mind:

Some users report problems with Thickbox positioning in IE6 and IE7. This is not specific to the Drupal Thickbox module, but rather the Thickbox javascript code itself. The author of that code has suggested a patch, but I couldn't immediately get it to work. I found it easier to switch to Lightbox2 instead, although I'm sure it's possible to overcome this.

Another feature of Lightbox2 is the ability to directly include HTML tags inside the title attribute of an image, thus allowing editors to style an image's caption. I had problems doing this with Thickbox, although I didn't try escaping tags very thoroughly. Of course, this means that users see raw HTML in the tooltip when hovering over an image in browsers other than IE, but this feature may be important to you regardless.

openflows.com

Users shouldn't see the HTML

stella - June 24, 2008 - 15:53

Users shouldn't see the HTML tags in the tooltip if you set the "title" and "alt" attributes of the image tag. The anchor tag is the one whose "title" attribute should display as the caption in Lightbox2. By setting the image "title" and "alt" attributes to just the caption without HTML tags then the hover tooltip will display those instead. If I recall correctly, IE uses the alt text and FF uses the title text. This was discussed before, see #245121: Visible HTML code in alt text, when using captions in title for more information.

Cheers,
Stella

Konqueror under KDE4

milianw - July 1, 2008 - 14:15

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.

This has indeed been added in KDE4. Works flawlessly.

slideshow module useful for inpage display

dps - July 2, 2008 - 14:33

If you don't want to cover up your page, the slideshow module allows you to cycle images in a block. That is useful to me.

Please warn people about Input Format filters and TinyMCE destroying your Lightbox html! It took hours to track down those issues.

http://2tell.org/boring

SWF videos fail to display using Firefox on a Mac

maniadmin - July 16, 2008 - 20:29

Because of a bug in Firefox on Mac OS X, SWF objects fail to display their content properly when their "wmode" parameter is set to "transparent" AND if there are any HTML elements on the page with CSS transparency set. See this posting for more details on this bug and how it affects Drupal modules: http://www.civicactions.com/blog/firefox_mac_and_transparency_woes_pulli...
(Bug #3 is what relates to our situation)

I ran into this bug, when trying to display youtube videos in a thickbox, using the Embedded Media Field module . The Thickbox module (and all other versions of these "lightbox" type modules?) uses a black transparent background set by CSS AND the video from youtube comes wrapped inside an SWF with wmode set to transparent. In this situation (only in Firefox on a Mac) the SWF appears as as a blank white box. If the video is set to play automatically, it's audio will be heard, but still only a blank white box for display. I've only tested with the "thickbox" module. Others might not achieve transparency via CSS, or might not display an SWF with "wmode" parameter set to "transparent".

This is a bug in Firefox, and not much we can do but workaround it, as far as I know. (I used a PNG file to substitute for the transparent BG in thickbox, and removed transparency in AdminMenu). I think it would be good to make note of this "exception" in the "Feature Overview" and "Mac Browser" tables above.

M.M.

jlightbox compatible with imagecache 2

vthirteen - July 24, 2008 - 02:02

the last dev version of jquery lightbox is actually compatible with imagecache 2 and is still the lightest, simplest and most compatible working option as far as i could see.

Both versions of Shadowbox

psynaptic - July 29, 2008 - 16:22

Both versions of Shadowbox 5.x are compatible with imagecache 2.

Lightbox HTML destroyed by 'out of the box' TinyMCE

mfuggle - October 3, 2008 - 11:14

I also spent hours trying to understand why the 'rel="lightbox2"' was always stripped from my HTML. It is caused by TinyMCE when installed out of the box and it is necessary to enable the use of "img rel" when TinyMCE is initialised. This can be done in he tinymce.module by adding the following line in tinyMCE.init.

tinyMCE.init({
...,
extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|
onmouseover|onmouseout|name|rel]"
});

Make sure you put a comma after the previous line and not after the last line.

This information comes from the following post http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/extended_valid...

Regards
Martin Fuggle

 
 

Drupal is a registered trademark of Dries Buytaert.