How do you resize Fancybox at runtime?

问题

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

When initializing the fancybox I can do this:

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

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

回答1:

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.

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

回答3:

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

$.fancybox.center();

回答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

回答5:

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

回答6:

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

回答7:

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'});

回答8:

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

}, ...

回答9:

$.fancybox.resize(); did not work for me, so I've put this code into the loaded page, inside the fancybox iframe :

$(document).ready(function(){
    parent.$("#fancybox-content").height($(document).height());
});

You could also set it in a callback :

$("#mydiv").toggle('fast', function(){
    parent.$("#fancybox-content").height($(document).height());
});

回答10:

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

Works like a charm!

回答11:

My solution was like that (for fancybox 1.3.4):

find

$.fancybox.resize = function() {
        if (overlay.is(':visible')) {
            overlay.css('height', $(document).height());
        }


        $.fancybox.center(true);
    };

and replace with

$.fancybox.resize = function() {
    if (overlay.is(':visible')) {
        overlay.css('height', $(document).height());
    }

    view = _get_viewport();
    var updated_width = view[0];
    if (updated_width > selectedOpts.width) { updated_width = selectedOpts.width; }

    $("#fancybox-wrap, #fancybox-content").css("width", updated_width);        

    $.fancybox.center(true);
};

回答12:

This method works for me. :)

$(".fancybox-wrap.fancybox-desktop.fancybox-type-iframe.fancybox-opened").css({"height": heightToAdjust});
$(".fancybox-inner").css({"height": heightToAdjust});
if ($.fancybox.isOpened) {
   if ($.fancybox.current) {
      $.fancybox.current.height = heightToAdjust;
   }
}
$.fancybox.reposition();

回答13:

I just posted a suggested patch to Fancybox on its Google Group https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8 that adds a public method $.fancybox.reshow(). This will recalculate the height and width of the fancybox. It works with both window.onorientationchange and window.onresize, for example:

window.onresize = function() {
    $.fancybox.reshow();
}

回答14:

This is the solution form my:

$("#linkpopup").fancybox({
    'titlePosition'     : 'inside',
    'transitionIn'      : 'none',
    'transitionOut'     : 'elastic',
    'onComplete' : function(){
        $.fancybox.resize();
    }
});

回答15:

Thanks to everyone who contributes to StackOverflow.com. You all have been life-savers to me many times over. Now, I finally get to contribute something. Below is how I was able to over come the resize fancybox at runtime quandry:

I assigned the href element specific attributes with dimension PHP vars passed to it. Then called and set the attribute in a click-event, with the fancybox control function and parameters embedded within...

<a href="ASSET_ABSOLUTE PATH" class="asset" data-fancybox-type="iframe" assetW="$assetW" 
assetH="$assetH">LINK</a>

$(".asset").click(function(){

    var assetW = $(this).attr('assetW');

    //to display inter-activities..
    $(".asset").fancybox({

    width       : assetW,
    fitToView   : false,
    autoSize    : true,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
       'onComplete' : function(){
         $.fancybox.resize();

      }
  });
});

回答16:

In my case, I'm using Fancybox to display a very simple web page that just contains an image. This image could vary in size. My problem was that the image didn't include style="height: NNpx; width: NNpx;". Without that, the fancybox autoSize may give unexpected results (stated in their docs http://fancyapps.com/fancybox/ ).

tl;dr: provide width and height attributes for autoSize to work correctly.

回答17:

On Fancybox 3 (newest version)

parent.jQuery.fancybox.getInstance().update();

Ref: http://fancyapps.com/fancybox/3/docs/#iframe

回答18:

Use:

parent.jQuery.fancybox.update();

来源：https://stackoverflow.com/questions/994876/how-do-you-resize-fancybox-at-runtime

标签

jquery

resize

fancybox