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

On Fancybox 3 (newest version)

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

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

Answer 2

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

Answer 3

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

      }
  });
});

Answer 4

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

$.fancybox.center();

Answer 5

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.

Answer 6

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