CODEWITHSUNDEEP
javascriptphpjqueryiframefancybox
user2885415
user2885415

Reputation:

Implementing Fancybox with iframe

I am trying to setup a website and very novice I am trying to setup a website and very noviceI am trying to setup a website and very noviceI am trying to setup a website and very novice

<iframe frameborder="none" src="20140905-8ebc/form.php" allowTransparency="true" style="position:relative;width:480px;height:600px;border:none;"></iframe>

    <a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>

    <script>
        $(document).ready(function() {
            $('.fancybox').fancybox();
        });
    </script>

</div>

Upvotes: 0

Views: 108

Answers (1)

frederickf
frederickf

Reputation: 1531

You don't create the iframe tag, fancybox does. I can't tell which version of fancybox you're using so here are code sample for both.

Version 1.x (http://fancybox.net/howto)

Create an anchor tag with a class that tells fancybox to open an iframe

<a class="iframe fancybox" href="20140905-8ebc/form.php">Open form</a>

or, use the URL itself

<a class="fancybox" href="20140905-8ebc/form.php?iframe">Open form</a>

Version 2.x (http://fancyapps.com/fancybox/#docs)

Create an anchor tag with a custom data attribute that tells fancybox to open an iframe

<a class="fancybox" data-fancybox-type="iframe" href="20140905-8ebc/form.php">Open form</a>

The fact that fancybox creates the iframe for you means you won't have direct control of the iframe attributes, but I don't think you will need them with fancybox. You can pass options to fancybox that impact the way the fancybox is displayed. There are too many to list, but they well documented at the links above. This is how to specify them:

$(".fancybox").fancybox({
    option  : value,
    option2 : value2
});

Upvotes: 1

Related Questions