Fancybox iframe working in compiler but not browser

Question

I'm having an issue with getting the fancybox iframe to load in the browser. I'm not sure what it is (I feel like it's something dumb) and I could use a hand.

The compiler has the lightbox working properly, but when I move it into my browser it's breaking. I thought it was an issue with my server, but when I open up the file directly from my desktop it still gives the same error. Any help is appreciated!

Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/DTVLBjqueryfancybox2.js"></script>
<link rel="stylesheet" type="text/css" href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/DTVLBjqueryfancybox.css" media="screen" />
<script type="text/javascript">
    $(document).ready(function() {

        $("#various3").fancybox({
            'width'             : 1000,
            'height'            : 500,
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>

HTML

<a id="various3" class="iframe" href="http://www.google.com">Iframe</a>

Haha...I really shouldn't call it a compiler. It's just Dreamweaver. — Dandy, Apr 05 '12 at 19:26

score 1 · Accepted Answer · edited May 23 '17 at 12:20

You should make sure that you don´t have any Javascript errors on the page. When I load your page it starts with:

GET http://www.localdtvdealer.com/Script/pageTracking.js /justintest1/:7

and

Uncaught ReferenceError: SaveAnalyticData is not defined /justintest1/:39

And after clicking the link I get (besided an empty lightbox):

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

If this is a new project upgrade your jQuery to 1.7+.

GET http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/blank.gif 404 (Not Found) jquery.min.js:4

Add the missing image

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

I think this is the real issue right here. You are not allowed to embed the stuff you want to embed (other domain?). This is a security prevention error. It prevents malicious i-frames on pages.

That definitely fixed it! The main issue was that it wasn't from the same domain. Now it's giving me problems in IE. Apparently this is a pretty common problem. Thanks again! — Dandy, Apr 05 '12 at 20:02

Fancybox iframe working in compiler but not browser

1 Answers1