Colorbox: A customizable JQuery Lightbox

Posted by Tejus Parikh on June 7, 2009

As soon as someone mentions Web 2.0, you know that you’re going to need a modal dialog. If a designer is involved, then you know that it’s going to have to look nothing like any of the standard lightbox clones.

The de-facto standard for modal dialogs with JQuery is Thickbox. However, if anything above sounds familiar, I recommend giving Colobox a try.

Colorbox is missing a few features of Thickbox. The Colorbox does not resize automatically and doesn’t change position on screen when the user-resizes their page. However, that wasn’t a big issue for my needs, since users probably couldn’t use the app unless they had maximized their browser anyway.

Where the developer of colorbox focused his time is allowing the developer using Colorbox to customize it however they want. Take a look at the css. Every element that you need to change has an ID and represented in the file.

One missing feature that would be nice to have is the ability to add custom buttons. In the app I’m building, I had to manually add them into the JS file. Which wasn’t hard, but it breaks the ability to upgrade.

However, the most important thing is the ability to make the product fit the design and colorbox does deliver on that.

Tejus Parikh

Tejus is an software developer, now working at large companies. Find out when I write new posts on twitter, via RSS or subscribe to the newsletter: