The Drupal Thickbox Module

Thickbox is a JavaScript widget built on top of the jQuery library. It displays an image or text in a pop-up window, allowing a user to view the image or text without leaving the original page. This is useful for viewing full-sized pictures by clicking on a thumbnail. It also has a gallery feature for picture groups so the user doesn't have to leave the pop-up box to cycle through a set of full sized pictures.

The Thickbox project page is http://jquery.com/demo/thickbox/. Everything is there on a single page, including implementation instructions for the widgets. It's the single best place to see what Thickbox can do.

The Drupal Thickbox project page is http://drupal.org/project/thickbox. At the time of writing the current module version is V5.x-1.1, implementing Thickbox 3 (the most current is 3.1). In addition to bringing Thickbox to Drupal the module adds Drupal specific integration:

• Special handling for Image module nodes
• Special handling for login links
• Ability to remove Thickbox on specific pages
• Formatters for CCK image fields used in View field (if imagefield module and imagecache module exist)
• Uses Drupal string translation for Thickbox text

Installation of the Thickbox module is very straightforward. Install the module by uncompressing it in your module directory and turn it on. It has a single administration page at Administer >> Site configuration >> Thickbox

jQuery is not installed in Drupal 4.7 but is provided by the Thickbox module. According to the release notes this may lead to a conflict if your site has already implemented jQuery.

Implementing Thickbox is simply a matter of HTML (see the Thickbox demo HTML for full details). As with jQuery widgets in general, Thickbox functionality is activated by adding a CSS class to a HTML tag. For example, if you have an image:

the Thickbox feature is implemented by enclosing the image tag in an anchor tag with class="thickbox":

Implementing the feature with an anchor tag allows picture viewing even if JavaScript is turned off in the client browser. With JavaScript turned on, Thickbox takes over the link and uses the pop-up box.

The Image module support works like you would expect it to. The Image module automatically creates a Preview and a Thumbnail image when an Image node is created. By default, an Image node displays the Preview image if the Thumbnail image is clicked. When Thickbox is enabled for Image nodes, the Preview image is displayed in Thickbox. The Thickbox gallery feature is used on Image Gallery pages.

CCK formatter for Views adds an extra display option for an Image field in Views if the imagecache and imagefield modules are installed. imagecache exports a display option for each imagecache preset. For example, if you create an imagecache preset named squarethumbnail, it will be available as a display option for imagefields. Thickbox adds a Thickbox option to each imagecache preset. For the above example of the squarethumbnail preset, a Thickbox: squarethumbnail option also becomes available.

So far I've only used the Thickbox picture display features, and experimented a bit with the other features. The picture display is working as advertised and I'm very happy with the ease of implementation.