Last updated February 1, 2014. Created by Matt V. on June 3, 2008.
Edited by rajmataj, chetan_singhal, dwieeb, Turek. 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 you experience problem using jQuery Update (which using latest jQuery js) then try this module instead of 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 works great with Views, Insert and Image modules and can natively display a node's field tokens as a caption to a greater extent than Colorbox. It is actively maintained and under active development.
  • 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.
  • CssBox - is very light-weight module that works as other lightbox modules but it does not use jQuery or JavaScript for that. It's driven by CSS3 and the only JavaScript used here is to output overlay contents by using document.write() for SEO purposes. You can also choose to output HTML directly to the DOM without JavaScript.

Overview

Module Overview

Module Versions Installs Documentation Demo Site Last Release
5.x 6.x 7.x
Lightbox2 Yes Yes Yes 120978 Handbook pages
README.txt
http://www.stellapower.net/lightbox2 2011-Oct-17
Colorbox No Yes Yes 132354 README.txt http://jacklmoore.com/colorbox/ 2013-Apr-08
Shadowbox Yes Yes Yes 15438 README.txt http://shadowbox-js.com/ 2013-Mar-22
Thickbox Yes Yes No 15160 README.txt http://codylindley.com/thickbox/ 2011-Feb-24
fancyBox Yes dev Yes 4129 README.txt http://fancyapps.com/fancybox/ 2013-Aug-5
Slideshow Yes Yes No 1464 README.txt 2009-Apr-05
YoxView No No Yes 963   http://www.yoxigen.com/yoxview/ 2011-Dec-23
jQuery Lightbox Yes Yes No 701 README.txt 2011-Feb-24
Highslide No Yes No 528   http://highslide.com/ 2011-Feb-24
Greybox Yes Yes No 264 README.txt 2008-Dec-04
Slidebox No No Yes 119 2012-Mar-26
Pirobox No No Yes 92   http://www.pirolab.it/pirobox_v_1_2/ 2012-Jan-16
CssBox No No Yes 42     2013-Jul-21
DBFM Greybox Yes dev No 34 2011-Feb-24
PhotoSwipe No 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 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
Fancybox Yes Yes Yes Yes Yes
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 Yes No
Imagefield Yes Yes Yes Yes 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 Yes No

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) Yes Yes Yes Yes Yes Yes
IE 7 Yes Yes Yes Yes Yes Yes
IE 6 Yes Yes Yes Yes Yes2 Yes
Opera (ver 9.2x, 9.5x) Yes Yes Yes Yes Yes No
Safari (ver 3.x) 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

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) Yes Yes Yes Yes Yes Yes
Safari (ver 2.x, 3.0) Yes Yes Yes Yes Yes No
Camino (ver 1.6) Yes ? ? Yes ? ?
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
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

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

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.