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, Jan 29 '13 at 19:13
@thaJeztah I console.log that and it only fires once at the first load. — Matías Cánepa, Jan 29 '13 at 19:24
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: http://stackoverflow.com/questions/10769151/fancy-box-work-with-iframes-in-beforeshow-function — thaJeztah, Jan 29 '13 at 19:31
@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, Jan 29 '13 at 19:47

score 4 · Accepted Answer · answered Jan 30 '13 at 18:44

4

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

answered Jan 30 '13 at 18:44

Matías Cánepa

5,770
4
57
97

Be sure and check this off as the answer for future viewers. – Grinn Jan 30 '13 at 18:48
@Grinn: Next time I will debug 2000 lines of someone else code before posting. Come on! If it adjust in height, one will expect that it will also adjust in width – Matías Cánepa Jan 31 '13 at 00:02
1

Sure. I'm just saying - for the sake of Stack Overflow viewers who may be experiencing the same issue, you should mark your answer as being correct. – Grinn Jan 31 '13 at 14:14
@Grinn: Oh I'm sorry! I thought that your were reproving me for posting my answer before checking the plugin code. I read it the worng way. Please accept my sincere apologies! I didn't mark it as correct before because I have to wait a day to mark my own response – Matías Cánepa Feb 01 '13 at 22:28
No problem. I figured that was the case. – Grinn Feb 05 '13 at 17:02

change fancybox size

1 Answers1

Linked