CODEWITHSUNDEEP
javascriptjqueryresizefancybox
johnnyArt
johnnyArt

Reputation: 4436

FancyBox resize width

I'm able to resize the height with the $.fancybox.resize(); part, but the width just doesn't update according to the new content. Thoughts?

Upvotes: 6

Views: 34597

Answers (5)

bhattraideb
bhattraideb

Reputation: 417

make some changes in jquery.fancybox.js near about line nubmer:837 change 

current.width = loadingBay.width();

to 

current.width = loadingBay.width() + 2*current.padding;

it worked fine to me.

Upvotes: 1

Badar
Badar

Reputation: 1460

Just open jquery.fancybox.js and add your own width. Here is my code with width = 72%.

// Reset dimensions so we could re-check actual size
        wrap.add(skin).add(inner).width('72%').height('auto').removeClass('fancybox-tmp');

Upvotes: -1

earachefl
earachefl

Reputation: 1890

Here's what worked for me:

$('#fancybox-wrap, #fancybox-outer, #fancybox-content').css('width', 'auto');
$.fancybox.center();

Upvotes: 1

TM.
TM.

Reputation: 111027

From the fancybox api docs:

$.fancybox.resize: "Auto-resizes FancyBox height to match height of content."

So it looks like it is not intended to adjust the width.

If you wish to adjust the width, you can do it by manually resizing the #fancybox-wrap and #fancybox-inner elements. After some very quick checking, it looks like #fancybox-wrap is set to 20px wider than #fancybox-inner:

$('#fancybox-inner').width(400);
$('#fancybox-wrap').width(420);

You can also control the width when you first register fancybox using the width option:

$('#somelink').fancybox({ width: '100px' });

Upvotes: 8

Hannes
Hannes

Reputation: 41

In newer versions of fancybox (1.3.4 in my case) use

$('#fancybox-content').width(600);

instead of 

$('#fancybox-inner').width(400);

for manually adjusting the width

Upvotes: 4

Related Questions