How do you resize Fancybox at runtime?

Question

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

$.fancybox.resize();

For version 2.x of Fancybox the same would be done with:

$.fancybox.update()

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

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();

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

$.fancybox.center();

Hey after fighting almost two days, I managed to change overlay height. Hope this can be helpful :

$('#register-link a').fancybox({
    onComplete: function(){
        body_height = $('body').height();
        fancybox_content_height = $('#fancybox-content').height();
        fancybox_overlay_height = fancybox_content_height + 350;
        if(body_height < fancybox_overlay_height ) {
            $('#fancybox-overlay').css('height', fancybox_overlay_height+'px');
        }
    }
});

What this code doing is, it first calculate height of body, #fancybox-content and #fancybox-overlay. Then it check whether body's height is less than overlay's height, if yes then it assign new calculated height to overlay otherwise it take default body's height

I just want to make you be aware of it.

After searching for solutions using javascript to adjust height me and my partner realized something stunning.

Check whether the containing elements of #fancybox-inner has PADDING or MARGIN set.

This is the key element (direct children of #fancybox-inner margin/padding definition.

The children elements (#fancyfox-inner > div > .here) can have padding, but dont forget to adjust:

 $('#element').fancybox({
    'onComplete' : function(){
        $.fancybox.resize();
    }
});