Search code examples
javascriptjqueryiframecolorbox

multiple colorboxes in iframes

I want to stack 2 or 3 colorboxes on top of each other, but not within each other's bounds like Russian Dolls, more like the first one covers 50% of the screen, the second one covers 100% of the screen, and then the third one covers 50% of the screen again.

I 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 time. I want the close button just to close that colorbox. In theory people will be closing them in order, but I can't predict that obviously.

I presume this is something to do with jquery selectors closing all open colorboxes. Any pointers appreciated.

Code to create first colorbox:

  $.colorbox({iframe:true, width:width, height:height, scrolling: false, href:linkRef, fastIframe:false, onClosed:function(){$('#cboxClose').attr('class', '');}});
  $('#cboxClose').attr('class', 'photomontageFrame');

Code to create second colorbox:

 window.parent.$.colorbox({iframe:true, width:width, height:height, scrolling: false, href:a, onClosed:function(){$('#cboxClose').attr('class', '');}});
 window.parent.$('#cboxClose').attr('class', 'photomontageFrame');

Thanks

Solution

  • I do not think your issue is iframe, it is the fact that colorbox only supports one instance. It also seems like a very old plugin, does not support newest versions of jQuery. I would look for a different plugin.