Crunchytoast.com

Hilbert’s Pallette, by Anton Sherwood
Awesome colorful boxes!

If you’ve been using the Colorbox Plugin for jQuery, you may have noticed that it rocks! Compared to the bevvy of other JavaScript modal dialogs, this one animates smoothly, loads quickly, is lightweight and well suited to jQuery projects.

However, the standard way to call it is from a click event. In fact, I couldn’t find any resources documenting how to launch a Colorbox programatically. The examples from the Colorbox website were strictly “on click” oriented. After digging through the source code, I tried a few things and hey presto, the answer was simpler than expected. For calling Colorbox from a function (i.e. without an click directly preceding it), you should do this…

//Launching jQuery Colorbox without a click
$.fn.colorbox({href:'/href.html', open: true, iframe: true, width:300, height:400});

This will open the colorbox immediately upon execution, this example opens in an iframe with width/height as shown. Note, the only options required to make it work are href and open:true. See the documentation for all other options.

For those of you wanting to write your own plugin, the Colorbox internals are a study in good jQuery plugin design. It features some nice techniques, including code optimizations that increase compression, and aliasing of otherwise long function names.

This entry was posted on Wednesday, October 7th, 2009 at 8:04 am and is filed under development. 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.