0

so i have downloaded the fancybox zip and added it to my site. when i go to the demos area, everything is working fine with the exception of the iframe. i havent edited the code in anyway. it works perfectly on their site, so im not sure why it would be any different on mine. i have searched through this site and others and have came up with nothing. again i have not edited any of the code, i simply unzipped it and pushed it to my server. any ideas? View Here

Ryan Fitz
  • 3
  • 1
  • 2
  • Many pages start blocking to iframe their site - http://stackoverflow.com/questions/5449017/putting-mobile-google-into-an-iframe-does-not-work – Janis Feb 21 '12 at 07:29

3 Answers3

5

This is not a fancybox issue.

The demo file included in the fancybox download, targets the jQuery site for the iframe sample .... but today most mayor sites like google, yahoo, and others etc. (and now jQuery too) don't allow themselves to be contained within iframes. I guess the demo file is outdated.

If you can place any web site within a regular html iframe (like your own or any other you create for instance), then you can open it with fancybox too. Check this demo and see it for yourself ... notice what iframes are "blank".

You can also check this thread for reference.

Community
  • 1
  • 1
JFK
  • 40,963
  • 31
  • 133
  • 306
  • thanks for the quick response, i wasn't aware that you could specify a page not to be displayed within an iframe, good to know! i was able to get a local file to show up within the iframe. however, i defiantly think fancybox should update their demo, as that was a bit confusing. again thanks for your help! – Ryan Fitz Feb 21 '12 at 06:17
  • please don't forget to mark this as the correct answer if you think it solved your issues or questions. thanks – JFK Feb 21 '12 at 06:57
  • 1
    Note that if we're talking YouTube videos, the "youtube.com/watch" version of the video is not able to be pulled up in an iframe while the "youtube.com/embed" version of the video is. Important to note that because it tripped me up :) – lewiguez Oct 29 '13 at 17:42
  • @lewiguez : is possible for you to keep using youtube's format `youtube.com/watch?v=` **IF** you add the fancybox media helper http://fancyapps.com/fancybox/#examples ==>extended functinality==>media helper tab (not need to set `iframe` type) – JFK Oct 29 '13 at 19:15
  • @JFK Hmm. I'm still using 1.3.x. I didn't realize this existed. That's pretty cool. Thanks for sharing! – lewiguez Nov 04 '13 at 13:49
  • @JFK Is there any ways to handle this scenario http://stackoverflow.com/questions/41456427/fancybox-how-to-check-whether-a-url-can-be-loaded-or-not-in-iframe-with-fancyb – Vivekraj K R Jan 04 '17 at 13:01
  • @vivek It may not be possible with javascript (forget fancybox) check http://stackoverflow.com/q/4548984/1055987 if that helps – JFK Jan 05 '17 at 04:22
2

You need to use your browser's error log / console when debugging.

I get

Refused to display document because display forbidden by X-Frame-Options.

when clicking the Iframe link.

jquery.com is obviously implementing the X-Frame-Options response header to prevent you loading their site in an iFrame.

Update

Here's an extract of the headers returned from jquery.com

$ telnet jquery.com 80
Trying 70.32.73.125...
Connected to jquery.com.
Escape character is '^]'.
GET / HTTP/1.1
Host: jquery.com

HTTP/1.1 200 OK
X-Frame-Options: SAMEORIGIN
Phil
  • 157,677
  • 23
  • 242
  • 245
-1

Very simply, the Iframe doesn't have a valid source.

Iframe has an attribute called src (source) which is the address of the site you want to display in the inline frame; yours in that demo is linking to http://jquery.com I don't know how Fancy box works but I daresay that isn't what you wanted!

<iframe class="fancybox-iframe" name="fancybox-frame1329790605687" frameborder="0" hspace="0" scrolling="auto" src="http://jquery.com"></iframe>

The src attribute on the main fancybox demo site links to a local page:

<iframe class="fancybox-iframe" name="fancybox-frame1329790726739" frameborder="0" hspace="0" scrolling="auto" src="/demo/iframe.html"></iframe>

Which you can see here outside of the iframe:

http://fancyapps.com/demo/iframe.html

Russ Clarke
  • 17,511
  • 4
  • 41
  • 45