Extend Fancybox inside an iFrame to outside

Question

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 1

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