How do you resize Fancybox at runtime?

Question

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

When initializing the fancybox I can do this:

$(\"tag\").fancybox({ \'frameWidth\         


        

Answer 1

I struggled with resizing fancybox too. Solution is $.fancybox.reposition();

Works like a charm!

Answer 2

I did find one solution to this bug after searching for it a long time in Google but not finding anything.

To resize the box to the width and height of the page and center it, do this:

$("#click-to-open").click(function(){

    var url = "url-loader.php";
    $.fancybox({
        'autoScale'           : false,
        'href' : url,
        'padding'             : 0,
        'type' : 'iframe',
        'titleShow' : false,
        'transitionIn'        : 'elastic',
        'transitionOut'       : 'elastic',
        'onComplete' : function(){
            $('#fancybox-content').removeAttr('style').css({ 'height' : $(window).height()-100, 'margin' : '0 auto', 'width' : $(window).width()-150 });
            $('#fancybox-wrap').removeAttr('style').css({ 'height' : $(window).height()-100, 'margin' : '0 auto', 'width' : $(window).width()-150 }).show();
            $.fancybox.resize();
            $.fancybox.center();
        }
    });
});

Answer 3

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 4

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

Answer 5

Use:

parent.jQuery.fancybox.update();

Answer 6

function overlay(){
   var outerH = $('#fancybox-outer').height();
   var bodyH  = $(window).height();
   var addH   = 300; //add some bottom margin

   if(outerH>bodyH){
    var newH = outerH + addH;
   }else{
    var newH = bodyH + addH;
   }

   $('#fancybox-overlay').height(newH+'px');

   $.fancybox.center();

}

and call it on event when you need... (eg. uploadify onSelect event -> long file list makes fancybox so big, and we calculate height again)

... 'onSelect' : function(event,ID,fileObj){

overlay();

}, ...