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

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

Answer 2

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.

Answer 3

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

Answer 4

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

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

Answer 6

This is the solution form my:

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