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.

Answer 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/

Answer 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+""});
   }
});

Answer 3

Look at the examples on how to access other content. If I understand your question correctly, you want to display an external source in an iframe. You can do that using:

(from the example page)

$(".iframe").colorbox({iframe:true});

<p><a class='iframe' href="http://google.com">Outside webpage (IFrame)</a></p>

Update: if what you want is to have something like the code above appear on the page when you enter a url, then I suggest that you use parameters or url rewriting to accomplish it. The idea would be that your url would include the page to load in the iframe and on the server you would extract this and use it to construct something like the code above on your page.

http://www.example.com/main?load=about.htm

or using something like MVC, you might have:

http://www.example.com/main/about

Which would invoke the about action on the main controller. This would render a view that contains the code injecting the "about.htm" content file into the iframe.