Fancybox: iframe doesn't work

Solution 1:

I had success changing the class on the anchor to fancybox fancybox.iframe.

<a class="fancybox fancybox.iframe" href="http://www.google.be/">This goes to iframe</a>
<script type="text/javascript">
    $(document).ready(function() {

        $('a.fancybox').fancybox();

    });
</script>

No idea why this is the case but it worked for me.

Edit: also need to update to a recent version of jQuery

Solution 2:

Just as an explanation because @imjared said :

No idea why this is the case but it worked for me.

Since you are trying to open an external page, the logical step is to open fancybox in iframe mode, however fancybox has no means to know that it has to wrap the content in an iframe tag.

There are three ways to tell fancybox to do it :

1). Add type: "iframe" to your custom script like :

$('a.fancybox').fancybox({
   type: "iframe"
});

2). Add the attribute data-fancybox-type="iframe" to your <a> anchor tag like :

<a class="iframe" href="http://www.google.be/" data-fancybox-type="iframe">This goes to iframe</a>

It requires HTML5 DOCTYPE though.

3). Add the special class fancybox.iframe to your <a> anchor tag as in the accepted answer.

The fancybox script is able to evaluate any of the states above but you should choose at least one of them to make it work (you could use more than one or altogether and it will work, but it's redundant)

NOTE : this is valid for fancybox v2.x+ only (... and requires jQuery v1.6 or later)

BTW : Due to security restrictions, some websites cannot be opened in an iframe, like google or facebook for instance. You should always consider the Same origin policy working with iframes and ajax content.

Solution 3:

This worked for me thanks to @JFK instructions:

<!DOCTYPE HTML>
<html>
<head>
    <!-- Add jQuery library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox -->
    <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <script type="text/javascript">
        $('a.fancybox').fancybox({
            type: "iframe"
        });
    </script>

</head>
<body>

<a class="fancybox" href="http://www.w3schools.com/" data-fancybox-type="iframe">This goes to iframe</a>

</body>
</html>

Solution 4:

Seems like cross-domain links are not opening. I was using localhost, and using href="http://localhost/example/?page_id=7896" only works. If i write href="http://google.com" it doesn't works. In case you can check by putting your site on a domain and use href="http://example.com?page_id=7896"

In html:

<a id="iframe" href="http://localhost/example/?page_id=7896">Link</a>

in js:

$("#iframe").fancybox({
        'type' : 'iframe'
});

Fancybox: iframe doesn't work

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Related

Recent Posts