How to construct a URL to open a page with jquery lightbox plugin colorbox?

Question

I am using jquery lightbox plugin colorbox (http://colorpowered.com/colorbox/) and i want to be able to construct a URL like www.example.com/about-me.html which will send the user to my website and open the iframed page (about-me.html) within the lightbox script.

I believe i have to use event hooks or something but i am not sure how to achieve the result. Any help appreciated.

Solution 1

Credit goes to Jack Moore on the colorbox google group.

His solution adapted to this question:

var url = document.location.href;
if(url.search(/\?about-me/i) !== -1){
    $(".iframe:first").click();

}

So the url would be www.example.com?about-me this would take the user to the homepage and this javascript will find that parameter and tell colorbox to open it.

Original google group thread and more info: http://groups.google.com/

Solution 2

edit - have updated my example source code below

i'm not familiar with that lightbox but I would assume that all you need to do is create a page and call the lightbox on window.load or dom ready like:

$(document).ready(function () {
   if(document.location.hash){
    //launch colorbox and use this hash
    $.fn.colorbox({width:"50%", inline:true, href:""+document.location.hash+""});
   }
});