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

I'm a software engineer that writes occasionally about building software, software culture, and tech adjacent hobbies. If you want to get in touch, send me an email at [my_first_name]@tejusparikh.com.