Working With Thickbox

I’ve recently had the pleasure of working with Thickbox, a lightbox implementation using the excellent jQuery JavaScript library. There are dozens of lightbox options available, so why did I choose Thickbox?

Simplicity, Thy Name is Thickbox

Thickbox is the slickest lightbox I have seen — it has a great user interface and it is trivially easy to set up. Here is some example code:

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen">

<a href="image.jpg" title="image caption" class="thickbox"><img src="images/thumbnail.jpg" alt="an image"/></a>

The first three lines pull in jQuery, the Thickbox library, and the Thickbox CSS. The last line is where the magic happens: the <a> tag wrapping the image includes a reference to a “thickbox” class which will trigger the lightbox effect when clicked. That’s it! There’s nothing else to set up, although you can include an optional title attribute if you want a caption on the image.

Since it is built on top of jQuery (46K minified), the Thickbox code is extremely lightweight and fast loading (less than 5K minified). Browser compatibility is also excellent due to jQuery — supported browsers include IE 6 and 7, Firefox 2, Safari 2 and 3, and Opera 9.

It’s Flexible Too

Thickbox includes baked in support for all of the most common ways to use a lightbox-style dialog:

1. A single image
2. Multiple images in a gallery
3. HTML content within the page
4. HTML content from another page or site (as an iframe)
5. HTML content loaded dynamically via Ajax

I won’t bore you with the details of each one. Check out the documentation for examples.

Calling Thickbox via JavaScript

It is also possible to create a Thickbox dialog programmatically via JavaScript, but this technique is strangely undocumented. At first I thought this might not be easy to do, but after cracking open the Thickbox source code (the un-minified version, thank you very much), I immediately noticed this function:

tb_show(caption, url, imageGroup)

This makes it easy to trigger a Thickbox dialog in code or via an event by passing in a caption string and a URL. The optional imageGroup parameter can also be used to pass in an array of images for a single or multiple image slide show gallery.

The only tricky part is constructing a URL, which needs to include the frame size and any other attributes you might need. Say, for example, you want to display some HTML content in a 300×200 dialog, you might do something like this:

<script>
var url = "http://www.blah.com/something?KeepThis=true&TB_iframe=true&width=300&height=200";
tb_show("My Caption", url);
</script>

You can pass in any custom parameters in the URL string, as long as they are before the “TB_iframe” parameter.

Go Easy on the Lightbox

One final note: a lightweight, easy-to-implement user interface effect like Thickbox gives Web developers another tool in their toolbox of rich UI elements. But as much as I love cool Web effects like this one, there is always a danger that they will become overused. Thickbox is one of the best lightbox implementations I have seen, but remember to use it only when it makes sense.

Posted on November 25th, 2007 in the JavaScript category | Permalink

---

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

---

Leave a Reply

You must be logged in to post a comment.