Hilbert’s Pallette, by 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…
[javascript]//Launching jQuery Colorbox without a click
$.fn.colorbox({href:’/href.html’, open: true, iframe: true, width:300, height:400});
[/javascript]
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.
If I knew more about Colorbox, would I understand the relevance of my image “Hilbert’s palette”?
Anton Sherwood
November 18th, 2009
The magic of Google Images. Consider it properly attributed (apologies for the oversight!)
admin
November 18th, 2009
Everthing I need, thanks so much!
Guilherme
July 21st, 2010
Thanks a ton! I was looking for the exact functionality! Took me more than a day, to come across your post! But when I did, and implemented it, it worked like a charm!
Thansk a ton!
Cheers,
RD
RD
November 30th, 2010
Thanks a lot, I was looking for this! =)
Andresa
August 4th, 2011