A.R. Van Halleorg

For the past 6 months at least, I’ve had varied versions of ‘JavaScript embedded into Colorbox’ as a search term that has led to my website and after numerous occasions of useless dead ends on my site, I thought that I’d go ahead and write a post about a very basic way to get this done.

The easiest way to call a Colorbox is with the following code:

$(“idColorboxLink”).colorbox({href:”/link/”, open:true});

Visit the demo page for Colorbox to see other ways to open it.

There are exactly 5 ways that you can place your JavaScript so that your colorbox content will be affected by it.

onOpen (Before Colorbox opens)
onLoad (While Colorbox is opening)
onComplete (Content is displayed in the Colorbox)
onCleanup (While Colorbox is closing)
onClosed (Colorbox is closed)

Then you just enter them into the code as follows:

$(“idColorboxLink”).colorbox({href:”/link/”, onOpen:function(){}, onLoad:function(){}, onComplete:function(){}, onCleanup:function(){}, onClosed:function(){}, open:true});

If you had a function like…fillField, you could just call it like this:

$(“idColorboxLink”).colorbox({href:”/link/”, onComplete:function(){fillField()}, open:true});

This probably could have been much more elaborate, but I’m more a use it to learn it kind of person and I thought that this might at least provide an idea of what to do if nothing else for those who are searching for this.

Have a great day.

Amendment : Please read this post for additional details.

Recently someone used the above to get to my site and I realize I haven’t written a post yet to explain what you can do about calling the Colorbox. After much trial and error on a project at work I ended up with a few options.

For those that don’t know how Colorbox is called…

Firstly you have an element with a class or id, i’d probably use an id unless you have a class that is pretty unique for the page (like the name of a button) for this case, let’s name the id as showGoogle

$(“#showGoogle”).colorbox({href:”http://www.google.ca/”});

The above will open a colorbox with Google’s homepage on it. Now the issue that came up afterwards is how do you do things inside the colorbox or access things in the colorbox once it’s up. Well, first, let’s show you two other things you can do.

Before you open your colorbox (I use this at work because we need to hide our videos before the colorbox opens):
$.bind(‘cbox_open’, function(){alert(“Whatever you want!”);});

After your colorbox is closed (I used it to bring back the videos):
$.bind(‘cbox_closed’, function(){alert(“Whatever you want when it’s closed!”);});

And finally there’s this other bit that works once it’s loaded:
$(“#showGoogle”).colorbox({href:”http://www.google.ca”}, function(){alert(“Show this bit here!”)});

The last issue I ran into was how do I get Javascript to go off on things inside the colorbox? I called it inside the code that shows up. Calling the function on the side with $(“#whatever”).click(function(){}); didn’t work, so I put the things I wanted in the click into a function, then called that function in the onClick.

So far I haven’t found an easier way about it, but I’m sure I’ll find it soon and I’ll update this post in the future to make sure it’s up to date.

Also someone searched for a colorbox bug in chrome, what was the bug? Maybe I can post the solution here or another colorbox post.

I was messing around with this yesterday. I was trying to get the javascript loaded by colorbox to fire when it showed on the screen. I wanted a default width to something and provide the default result in another box at the same time.
If you’re using jQuery, which is what I was using, don’t bother trying to make it work with your CSS style call for the element to capture the click/key events. Put it directly into the click=”" onkeyup=”" etc. Sounds lame, and it is, but that’s the easiest way to do it. You can still keep the functions you made (just call them). You can still call it like $(“#element”).val(‘value’). It just avoids the lack of event capture issue.
If you have another tip, add it to the comments of this post! I’d certainly like another workaround!

I’ve blogged twice before about PrettyPhoto which is a kind of thickbox/lightbox that I enjoy working with, but recently I’m looking at ColorBox, which is another one of the same style of plugins to use and I think works really well.

According to the website ColorBox is tested In: Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8. (I haven’t confirmed in all browsers as of yet, but it looks good in Firefox 3.5 and IE7/IE8 that I’m aware of.)

You can read more here about what it offers. But among it is :

• Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
• Lightweight: only 9KB of JavaScript.
• Appearance is completely controlled through CSS so users can restyle the box.
• Behavior settings can be over-written without altering the ColorBox javascript file.
• Completely unobtrusive, requires no changes to existing HTML
• Preloads background images to avoid flash of unstyled content on first use.
• Can preload upcoming images in a photo group.
• Written in jQuery plugin format and can be chained with other jQuery commands.
• Generates W3C valid XHTML and CSS, adds no JS global variables & passes JSLint.
• Released under the MIT License.