FancyBox 3 load iframe on link click not working

Question

I'm trying to load an iframe using fancybox 3 after a link click.

The iframe shows up if I click on link number 2 where fancybox is added inline.

If I click on link 1 where the fancybox is added via JavaScript it shows the popup with page not available.

Could you help me to understand why please?

Thanks

Here is the code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
        <script> 
            $(document).ready(function () {
                $('a#link1').click(function (e) {
                    $("a#link1").fancybox({
                        iframe: {
                            attr: {
                                href : "pagetest.html"
                            }
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <a id="link1" href="javascript:void(0);">Preview link1</a>
        <a data-fancybox data-type="iframe" data-src="pagetest.html" href="javascript:void(0);">Preview link2</a>
    </body>
</html>

pagetest.html

<HTML>

<HEAD>

<TITLE>Your Title Here</TITLE>

</HEAD>

<BODY BGCOLOR="FFFFFF">

<CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>

<HR>

<a href="http://somegreatsite.com">Link Name</a>

is a link to another nifty site

<H1>This is a Header</H1>

<H2>This is a Medium Header</H2>

Send me mail at <a href="mailto:support@yourcompany.com">

support@yourcompany.com</a>.

<P> This is a new paragraph!

<P> <B>This is a new paragraph!</B>

<BR> <B><I>This is a new sentence without a paragraph break, in bold italics.</I></B>

<HR>

</BODY>

</HTML>

Answer 1

You are using fancyBox v3, but the syntax you are using seems to be from the previous versions. This is how it works now:

$('a#link1').click(function (e) {
  $.fancybox.open({
    src : 'pagetest.html',
    type : 'iframe'
  });

  return false;
});

Demo - https://codepen.io/anon/pen/aYvQBv?editors=1010

FancyBox 3 load iframe on link click not working

Question

1 answers

solution1
2 ACCPTED 2018-03-13 08:31:53

FancyBox 3 load iframe on link click not working

Question

1 answers

solution1 2 ACCPTED 2018-03-13 08:31:53

solution1
2 ACCPTED 2018-03-13 08:31:53