Thickbox 3.1 | WebReference

Thickbox 3.1

By Arpan Dhandhania

This is a sequel in a series of articles on various implementations of Lightbox. In the first installment, Shedding some light on Lightbox, we analyzed the 'Lightbox 2' Javscript library. The second article, Greybox, Lightbox Part 2, explained how to use Greybox to display a web page in a div. In this article, we will discuss another library, namely Thickbox, which can be used to display modal dialog boxes.

What is Lightbox?

"Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."

Though this quote has been pulled from Lokesh Dhakar's implementation of Lightbox, it holds true for all its implementations. For more about Lightbox, read the first part of this series here.

Thickbox 3.1

"ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal."

Advantage Thickbox

  • Thickbox is built on top of jQuery. If your site is already using jQuery, then Thickbox will only add another 10 KBs to your site. If you're not using jQuery, you should. :)
  • Thickbox will resize large images to fit into the browser window.
  • Thickbox will remain centered in the window even when the user scrolls the page or resizes the window.
  • Thickbox supports keyboard navigation through a set of photos.
  • Thickbox can be used to display modal dialog boxes.

Examples

Thickbox supports the usual stuff, such as displaying a single photo or an album of photos. In the case of an album, it doesn't ship with transitions between photos nor does it provide a slideshow mode. Therefore, you need to code the transition that you want to use. Is this a feature? I think so! This is an epitome of "less is more". Since Thickbox isn't tied to any one transition, it allows me to use any and as many transitions as I like.

Single Photos

Photo Album

Inline Content and Modal Dialog Box
Several implementations of Lightbox support displaying inline content. So does Thickbox. Click here for an example.

Thickbox goes beyond the usual and can be used to display modal dialog boxes. I don't think the use of modal boxes in a web application needs any justification. Click here for an example of modal box.

How to Use Thickbox 3.1

Before you implement Thickbox, make sure that the page has a valid DTD. This is a requirement for Thickbox to function correctly.

  1. Include Javascript files.
    Thickbox is built on jQuery; so you will need to include jquery.js and thickbox.js. Make sure you include jquery.js before thickbox.js otherwise Thickbox won't work. You need to download thickbox.js (or thickbox-compressed.js) and jQuery Javascript Library (or the compressed version). Thickbox works well with jQuery version 1.2.6. If you run it with a later version of jQuery (1.3 and 1.3.1), the photo album doesn't seem to work. So until we see an update of Thickbox, we will have to use jQuery 1.2.6.
  2. Include the CSS.
    Thickbox comes with a CSS file that can be downloaded from here. You will also need a loading graphic called loadingAnimation.gif. By default, it needs to be in a folder called /images, but you can change the path to this graphic in thickbox.js.
    Note: You will need to download macFFBgHack.png and update the path to it in thickbox.css. This is a hack to get Thickbox to work correctly on Firefox on the Mac.
  3. Use Thickbox.

    We saw a few examples of Thickbox at work, let us now see how to implement it.

    • Single Photo
      Syntax:
      Example:
    • Photo Album
      Syntax:
      Example:
      Note: To group a set of photos into an album, you need to give the same value to the rel attribute. In the example, I have used photo-album.
    • Inline Content and Modal Dialog Box
      To display some content inline, wrap it into a div and assign it an ID. You will also need a link to be clicked on to trigger Thickbox to pop up the content. Here is the syntax of the link:
      Example:

      If you want the pop up box to function like a modal dialog box, all you need to do is add &modal=true to the link. Here is an example of a modal dialog box:

      I have added a submit button that calls tb_remove(). Thickbox requires that function to be called from within the hidden div since in the case of a modal dialog box, clicking outside the box or hitting escape doesn't hide the box. The only way to hide it is by calling tb_remove().

Conclusion

Thickbox can be used to display pretty much anything that can be viewed in a browser. For more information about Thickbox, visit the official Thickbox page. It works in most popular browsers. To be more specific, here is a list of browsers in which Thickbox should work correctly.

  • Windows IE 6.0
  • Windows IE 7+
  • Windows Firefox 2.0.0.6+
  • Windows Opera 9.0+
  • Macintosh Safari 2.0.4+
  • Macintosh Firefox 2.0.0.6+
  • Macintosh Opera 9.10+

This completes the third implementation of Lightbox. The USP of Thickbox is the support for modal dialog boxes, which the other two implementations didn't have. A few other implementations of Lightbox also support modal dialog boxes. One such library is Lightbox Gone Wild. You might want to give that a shot and see if it suits your situation better.

One last implementation will complete this series on Lightbox. Even though Emanuelle Feronato, its author, calls it a CSS-only implementation, it isn't entirely true--but the fact still remains that it is probably the lightest implementation of Lightbox. You will need to wait until the next installment to see how it works.