4

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?

Armando Freire
  • 417
  • 2
  • 7
  • 19

2 Answers2

8

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">');
});
Mottie
  • 84,355
  • 30
  • 126
  • 241
  • Altough I've removed the iFrame, the solution I used before i remove the iFrame was similar to @fudgey answer! Thanks again =) – Armando Freire Jul 04 '11 at 17:51
  • How can you style such fancybox? For example: `'showCloseButton' : false`? – Key-Six May 11 '13 at 23:42
  • @Drejon The stylesheet for fancybox should be loaded in the parent window along with the script. – Mottie May 13 '13 at 13:14
  • Yes, but that would affect also all the other fancyboxes on the parent site. – Key-Six May 13 '13 at 16:16
  • 1
    @Drejon Yes, but with the newer version of fancybox, you can add custom css using the helper option - [updated demo](http://jsfiddle.net/Mottie/p9XuH/83/); or use the `tpl` option. – Mottie May 13 '13 at 16:37
0

It's not possible. Iframes are independent pages and can only interact to the parent via JavaScript, and even then it's shady behavior.

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

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

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

Cheers. :)

Community
  • 1
  • 1
Adam Terlson
  • 12,610
  • 4
  • 42
  • 63
  • Thank you so much Adam! I know that old problem about the iFrame, but the customer requested me to use it, so, I used! It was necessary on the business... :D I'll check the link, and feed you back! – Armando Freire Jun 29 '11 at 23:14
  • We all know that tune. If you found my answer to be accurate, please mark it as the answer by clicking the checkbox on the left. Thanks. – Adam Terlson Jun 30 '11 at 01:44
  • 1
    iframes are still very much useful. YouTube and Vimeo (and I'm sure some others) now use iframes instead of embedded videos so you can watch them on an iPad. – Mottie Jun 30 '11 at 04:40
  • @Fudgey - Everything has its use, but this is clearly not a scenario with video or alt content. The OP is trying to show a lightbox from a frame over the main window, clearly representative of a design that implements frames, not a structure for calling out to remote content. – Adam Terlson Jun 30 '11 at 13:14
  • I decided to remove the iFrame! Altough i had some hard work to remove it due to the complexity of the project, the iFrame would surely give me more headaches then benefits at the current state of the project! Thanks for helping guys! =) – Armando Freire Jul 04 '11 at 17:50