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 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.
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.
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.
- 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.css. This is a hack to get Thickbox to work correctly on Firefox on the Mac.
- Use Thickbox.
We saw a few examples of Thickbox at work, let us now see how to implement it.
relattribute. In the example, I have used
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:
If you want the pop up box to function like a modal dialog box, all you need to do is add
&modal=trueto the link. Here is an example of a modal dialog box:
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
- Single Photo
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 184.108.40.206+
- Windows Opera 9.0+
- Macintosh Safari 2.0.4+
- Macintosh Firefox 220.127.116.11+
- 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.