Oct
2
2011

How to use the jQuery plugin Colorbox from within an iframe

If you’ve ever needed a high quality lightbox and did some research, I’m sure you’ve come across the jQuery plugin Colorbox. It’s lightweight, themeable with just CSS, and very easy to use. I’ve been using it for a few years now, and have never had a reason to try something else. Anyway, I recently had to open up a Colorbox link from within an iframe, but in the parent window, not the iframe window. Lets get right to it: here’s the demo, or if you prefer here’s a Zip file of the demo.

The problem of course, is that if you call Colorbox in the standard way, it will just open up the lightbox inside of the iframe. In most situations, that would look terrible and be a usability nightmare. So basically, from inside of the iframe, we tell its’ parent window to run a function, and that function takes the iframe Colorbox url. The parent window then winds up opening the link, giving you a normal fullscreen lightbox, even though the link originated inside of an iframe. Here’s the actual code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function () {

// This makes the link inside the iframe open in the parent window
$('a.colorbox').click(function (event) {
event.preventDefault(); // this just cancels the default link behavior.
parent.showColorBox($(this).attr("href")); //this makes the parent window load the showColorBox function, using the a.colorbox href value
});

});

//This function only needs to be available in the parent window, but no harm in loading it for both. Notice this is NOT in the $(document).ready on purpose.
function showColorBox(imageURL) {
$.fn.colorbox({ innerWidth: "850px", innerHeight: "550px", iframe: true, transition: "elastic", opacity: .6, open: true, href: imageURL });
}

By the way, this is not completely original work. I believe it was originally based on this. I’ve just seen some confusion on how to actually implement it completely, so nothing solves that problem like a full working demo, right?

So there it is, a Colorbox based lightbox opening up from inside of an iframe. Nothing fancy really, just something that I had to Google for a while because no one actually had a complete example to look at. I hope this helps someone, because I knew it wasn’t hard, and was annoyed that I didn’t find this exact demo very quickly with a search. If you have any issues, let me know!

 

Related Posts

About the Author:

I like technology, sci-fi, fantasy, and anime. You know, cool geeky stuff.

25 Comments + Add Comment

  • Thanks a lot!

    This was exactly what I needed!

  • his dudeness, thanks a lot!!! save the day!

  • Very cool indeed! this however require to be able to edit the parent element of the iframe, isn’t it? I’m using a lightbox inside an iframe tab on facebook, and the lightbox centers vertically the whole iframe height, this can be pretty messy if the link triggered is positioned far from the center of the page. Do you think it’s possible to achieve a reposition of the lightbox based on the viewing screen in this kind of situation? Thanks a lot for any suggestion, cheers! :)

  • Hey Gruber, it’s hard to know the exact situation from what you’ve described. However, you’re right on point in assuming that you need control of the parent for most, if not all of these kinds of manipulations. In my example, the parent is the one calling Colorbox, so without the parent having that js file loaded, it would never work.

    Also, I believe that you can’t manipulate 3rd party content via iframes on purpose, for security reasons.

  • I am using your code in my sharepoint project, where I have an iframe with a link which is supposed to open up in colorbox (out of the iframe, ie, on parent window).
    At parent.showColorBox, I get a “Permission Denied” js error, the colorbox fails to popup.
    Could you shed some light on this topic?

  • I’m guessing that your parent and iframe are on 2 different domains? If the iframe lives on something.com, and the parent is on somethingelse.com, then you often run into “permission denied” issues because of security.

    Here is a little more information on the subject:
    http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe (Specifically the reference to ‘Same Origin Policy’ – http://en.wikipedia.org/wiki/Same_origin_policy)

  • I am able to get colorbox to open in the parent. However, it is blank, not displaying the href from the click event. The passed href is getting to the parent function and can be seen in an alert. Using IE8.

    Any thoughts?

  • Cool. But, how do I approach this if I have got a group of images to be displayed one by one with a previous, next button? In other words, where do I include “rel”?

  • I appreciate the comments. I’m going to investigate both of your issues to see if I can help out in the next few days. Sorry, it’s late already and I need to get up early. Please check back soon.

  • James, first, thank you. Because of your question, I realized my demo didn’t even work anymore. Long story short, iframes can often be abused for malicious purposes, and apparently, google.com (my demo url in the iframe) has started using some special code to prevent the site from showing up in iframes at all, for security purposes. I’ve actually just changed the demo to use metaflood.com, and it works again (as long as you don’t have the old one cached still). So give it another try, and it should be ok.

    More details here: http://stackoverflow.com/questions/8524449/google-homepage-will-not-load-in-an-iframe

  • MetaFlood, thanks for you response and efforts.

    I was able to do a simple test page with an iframe and get this demo working with my own pages. However, when I try this example with a frameset and frames, the colorbox opens in the parent blank and does not display the href.

    Any thoughts on how to get this working with a frameset?

  • Thank you so much for that good job :)

  • Hello Guys,

    I have a question…
    What to do if that iframe is located in another overlays window not on the principale page. And i want the whole window to be covered by colorbox.

    I mean :
    1) I have my homepage with a menu
    2) After clicking a menu link, it opens an overlay window (which is not colorbox) which contains an iframe. And, that iframe contains the page where there items (links) to be display in Colorbox.
    3) I want Colorbox to overlay the homepage not the iframe.

    I tried your method describe above. I implemented it and it works only when the iframe is located in the homepage. Not when the iframe is located in another overlay windows previously opened by the homepage. In that case, colorbox keeps on displaying within the iframe and i want it to be display over the whole content.
    Is that clear for you ? Could you please provide me some support ?
    Any kind of help is welcome…

    Thank you in advance.

  • It is ok. I found finally the solution myself.
    Thank you all :)

  • hello,

    I would like to relaunch the question asked above by @Kit May 13, 2012 at 12:43 PM :


    Cool. But, how do I approach this if I have got a group of images to be displayed one by one with a previous, next button? In other words, where do I include “rel”?

  • Hi,
    Thanks for your sharing. I’m using your donwloading demo, and test on GoogleChorme, but it cannot work, need assistant… thanks.

  • Hey YC, you were right! I forgot to update the zip file. The download files work as expected now. Also, for the rest of you who may need help, here is the official documentation:
    http://www.jacklmoore.com/colorbox
    along with very good examples in the FAQ as well (including iframe usage and more):
    http://www.jacklmoore.com/colorbox/faq

  • Hi, i have some similar thing in http://jsfiddle.net/srinivaswaterdrop01/HTCx9/ , here onclicking the “Clickme” text the jquery colorbox is opening and when i click on “OK” button in this colorbox another colorbox should be opened on the already existing colorbox that mean the existing colorbox should also be there at the background. That mean i want to display one colorbox over another colorbox. Is that possible to do and if so, please suggest me how can i do that one asap.

  • Thanks a lot.
    I was looking for this about 3 days.

    Good luck buddy

  • Awesome code!!!
    thanks you for sharing this. :)

  • Thanks a lot!

    Worked really grt.. :)

  • Hey!!! thanks for the sharing this!!
    It’s great :)

  • Hey!
    If it’s a set of images… is it possible to add the functionality: ” image ‘x’ of ‘y’ “?

  • That works perfectly!! Thanks a lot!

  • […] have managed to create the effect, with some help from here, but the problem is that when I close the colorbox, all currently open colorboxes close at the same […]

Leave a comment