jQuery FancyBox Resize

Question

Hi,

Does anyone know how to resize the jQuery Fancybox during runtime?

When initialising the fancybox I can do this:

$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });

I am filling the fancybox with dynamic content and want it to resize according to the content.

Anyone has a clue?

Thanks, Swiftaxe

Answer 1

If Fancybox was part of jQuery UI, you'd do it like this:

$("tag").fancybox.option('frameWidth', 500);

But as it doesn't seem to provide such a method, you need to set the CSS directly:

$("#fancy_outer").css({'width': '500px', 'height': '500px'});

Answer 2

Alan's solution is incomplete because the box is no longer centered on the screen after modifying the size (at least with the latest jquery and fancybox versions).

So, the complete solution would be:

$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();

Answer 3

If you are using version 1.3 of Fancybox, there is a resize method:

$.fancybox.resize();

Which will resize the active fancybox based on the size of the content inside it.

Answer 4

$("#fancybox-wrap").width(width); //or height or whatever

$.fancybox.center();