A.R. Van Halleorg

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.