Geek Answers Handbook

Extend Fancybox inside iFrame to external

I am stuck in a problem. I have a fancybox inside an iFrame and it works fine, but I need it to go beyond the iFrame so that it can fill the whole screen (I mean extend its parent).

Does anyone know how to do this?

+4
source share
2 answers

If both the page and the iframe are in the same domain, you can open the fancybox window in the parent within 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 a script to call fancybox on 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">'); });
+8
source

It's impossible. Iframes are independent pages and can only interact with the parent using JavaScript, and even then this is shadow behavior.

Your fancybox cannot propagate to the iframe no matter what you do, but with some work you could call one on the parent page using JavaScript.

This post will answer your question in both directions (parent -> iframe, iframe -> parent): Call JavaScript code in the iframe from the parent page

As a side note, iframes fell out of fashion about 5 years ago. I would avoid them in any new production.

Greetings. :)

0
source

More articles:


All Articles