CODEWITHSUNDEEP
jqueryiframefancybox
Ryan
Ryan

Reputation: 23

Fancybox iframe size

I've searching everywhere for this problem. When the user clicks on a link, it loads a fancybox with an iframe. For some reason, the iframe however is a tiny size. I have tried adjusting the width, height, minWidth and minHeight settings, but it makes no difference.

Here's the relevant code in the header (I have all the Fancybox scripts linked):

 <script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

<script type="text/javascript">
    $(document).ready(function() {
     $("iframe").fancybox({
        'width': 600,
        'height': 250,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'type': 'iframe'
    });
});
</script>

And html:

 <a class="fancybox fancybox.iframe"  href="iframe.html">link here </a>

Any ideas?

Upvotes: 1

Views: 40130

Answers (2)

JFK
JFK

Reputation: 41143

If you have this html

<a class="fancybox fancybox.iframe"  href="iframe.html">link here </a>

then the selector you are binding to fancybox is .fancybox.

fancybox.iframe on the other hand, is a special class introduced in version 2.x that indicates what type of content fancybox needs to open and you don't need to do anything specific with it, so :

<script type="text/javascript">
    $(document).ready(function() {
     $(".fancybox").fancybox({
        'width': 600,
        'height': 250,
        'transitionIn': 'elastic', // this option is for v1.3.4
        'transitionOut': 'elastic', // this option is for v1.3.4
        // if using v2.x AND set class fancybox.iframe, you may not need this
        'type': 'iframe',
        // if you want your iframe always will be 600x250 regardless the viewport size
        'fitToView' : false  // use autoScale for v1.3.4
    });
});
</script>

that should do the trick.

Bear in mind that if you are using fancybox v2.x, the API options are new and not compatible with previous versions. Check http://fancyapps.com/fancybox/#docs for the complete list of options, methods and callbacks for that version.

Upvotes: 3

julian
julian

Reputation: 36

try setting autoScale=false

julian

Upvotes: 0

Related Questions