Extend Fancybox inside an iFrame to outside

Armando Freire picture Armando Freire · Jun 30, 2011 · Viewed 13.1k times · Source

I got stuck in a problem here. I have a fancybox inside an iFrame, and it works normally, but I need it to extend outside the iFrame so it can fill the whole screen (I mean extend to it's parent).

Does anybody knows how to do that?

Answer

Mottie picture Mottie · Jun 30, 2011

If both the page and the iframe are in the same domain, you can open the fancybox window in the parent from inside the iframe. Check out the demo.

Parent Window (contains fancybox script, css and iframe)

<iframe src="child-page.htm" height="250" width="500"></iframe>

Child Page (contains script to call fancybox in the parent)

$('a').click(function() {
  // target the parent window (same domain only)
  // then call fancybox in the parent
  // You can add any HTML you want inside the fancybox call
  window.parent.$.fancybox('<img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" height="333" width="500">');
});