fancybox iframe dimension

Question

In the fancybox homepage (http://fancybox.net/home) there is an example that opens an iFrame dimensioned as the 75% of the screen.

I can't get it by modifying the width and height properties on the .js file as described on the site.

Answer 1

You should try this:

$('iframeLink').fancybox({
'width':300,
'height':200,
'type':'iframe',
'autoScale':'false'
});

Answer 2

By simply changing the value of type from 'iframe' to 'ajax' , solve the problem .

$('Selector').fancybox.open({
                href : 'iframe.html',
                type : 'ajax',  //from type : 'iframe',
                padding : 0     
            });

Now it use the height & width of class described for the body of iframe.html file. So auto manipulated.

Answer 3

I'm guessing you should set the fancybox height as

$(window).height() * 0.75 

but I would personally prefer to do it with pixels like

$(window).height() - 80

Answer 4

Hi I just read through all of these and I had to take bits and pieces of what everyone else wrote to get it to work. I wanted a window 600 by 410

First change the java script I dealt with the file: jquery.fancybox-1.3.4.js (this may change with later versions) under defaults set your height and width

width : 600, height : 410,

*then change the script on your webpage

$("#various3").fancybox({

'width' : 600,

'height' : 410,

'autoScale' : false,

'type' : 'iframe'

please note the size is not in single quotes! I wasted an hour before I saw this mistake.

This should help. Now if someone can tell me how to get this iframe to pop up on page load.

Answer 5

I had the same problem and ended up adjusting the default dimensions at the bottom of the fancybox js file - "frameWidth:800,frameHeight:600"

They also mention you can do this on the fancybox site:

You can pass options as key/value object to fancybox() function or modify them at the bottom of FancyBox JS file

Answer 6

but my fancybox work with ajax and so i can't change fancy size !

$('iframeLink').fancybox({ 'width':300, 'height':200, 'type':'ajax', 'autoScale':'false' });

Answer 7

I've got version 2.14 and this is what works for me.

$(document).ready(function() {
    $(".iframe").fancybox({
    type: 'iframe',
    'padding' : 0,  
    'autoSize': false,      
    'width': 650, 
    'height': 520
    });
});