change fancybox size

Question

I show an iframe with fancybox. Inside the HTML of the iframe I do this:

<body style="width: 650px; height: 430px;">

Then in JS I do the followig:

$(".popup").fancybox({
    padding : 0,
    closeBtn : false,
    autoSize  : true,
    fitToView : false,    
    beforeShow: function()
    {
        this.width = ($("iframe").contents().find("body").width());
        this.height = ($("iframe").contents().find("body").height());
    }
});

Where ".popup" is:

<a href="url.php" class="popup" data-fancybox-type="iframe">

If inside that iframe I load another HTML with different dimensions (let's say 400x150), fancybox adjust it's height but not it's width.

any help will be appreciated!

EDIT 1:

The first time I run fancy box, the ".fancybox-inner" div get styled like this

width: 650px; height: 430px;

Then, when I navigate inside the iframe, the ".fancybox-inner" div get styled like this

width: 650px; height: 150px;

but the second HTML body tag is like this

<body style="width: 400px; height: 150px;">

EDIT 2:

the comments from this solution linked in this answer, indicates me that this only works with the height

Have you checked if ($("iframe").contents().find("body").width()); gives a proper value? — thaJeztah
@thaJeztah I console.log that and it only fires once at the first load. — Matías Cánepa
so the problem seems not to be that you're unable to set the dimensions (which works the first time), but that beforeShow() is only triggered once. You might edit/update your question to clarify this. Also, I found this, which seems similar, maybe it helps: stackoverflow.com/questions/10769151/… — thaJeztah
@thaJeztah Yes! that's where I've got de beforeShow code. The thing is that if I navigate inside the iframe and the next page has different dimensions, the fancybox somehow only adjusts it's height — Matías Cánepa

Matías Cánepa Matías Cánepa · Accepted Answer · 2013-01-30T18:44:17

Ok, I ended up doing this using fancybox version: 2.1.4 (Thu, 10 Jan 2013)

at line 1231 you will find

origHeight = body.height();

After that add this

origWidth = body.width();

That auto adjust both height and with

change fancybox size

1 Answers