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': 500, 'frameHeight': 700 });

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

can't you just set the content and call fancybox again? – rossipedia Aug 30 '11 at 19:00 — rossipedia, Aug 30 '11 at 19:00

score 43 · Answer 1 · edited Aug 06 '12 at 17:09

43

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.

edited Aug 06 '12 at 17:09

Dan

3,246
1
32
52

answered Mar 24 '10 at 04:05

Jason Norris

439
4
3

7

This will only resize the height, not the width. – Björn Jun 22 '11 at 02:18
1

Thanks! This is valueable. Most of the time for me, it's about resizing the height (due to form error messages) – vdboor Sep 09 '11 at 11:49
2

Tried update() with fancybox 2.0.6, no success. (width is not updated, as Hans noted) With fancybox 2.1.5, it works, both width and height are resized. – Lez Feb 09 '15 at 22:48

score 11 · Answer 2 · answered Jan 12 '10 at 21:10

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

score 4 · Answer 3 · edited Apr 11 '14 at 12:53

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

tibalt · Answer 4 · 2010-05-11T12:41:05.213

4

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

$.fancybox.center();

edited May 11 '10 at 12:41

answered May 11 '10 at 09:09

tibalt

15,201
1
29
22

score 4 · Answer 5 · answered Mar 23 '11 at 06:28

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

score 4 · Answer 6 · answered Jul 19 '11 at 20:22

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

score 3 · Answer 7 · answered Jun 15 '09 at 07:55

3

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

answered Jun 15 '09 at 07:55

Alan Plum

10,814
4
40
57

nołname · Answer 8 · 2012-04-08T15:02:18.837

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

}, ...

score 1 · Answer 9 · answered May 29 '12 at 19:14

1

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

Works like a charm!

answered May 29 '12 at 19:14

meridius

1,495
1
18
26

score 1 · Answer 10 · answered Apr 24 '14 at 11:53

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

score 1 · Answer 11 · answered Apr 04 '16 at 09:56

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

score 1 · Answer 12 · answered Mar 17 '12 at 00:00

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

score 0 · Answer 13 · edited Sep 10 '12 at 21:21

0

This is the solution form my:

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

edited Sep 10 '12 at 21:21

Greg

23,155
11
57
79

answered Apr 08 '12 at 00:42

Fernando

1,126
12
13

RudyRyu · Answer 14 · 2013-10-03T14:07:53.553

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

      }
  });
});

score 0 · Answer 15 · answered Jan 16 '15 at 19:34

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.

l2aelba · Answer 16 · 2017-10-30T13:47:36.167

0

On Fancybox 3 (newest version)

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

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

edited Oct 30 '17 at 13:47

answered Oct 30 '17 at 13:24

l2aelba

21,591
22
102
138

score 0 · Answer 17 · answered Aug 30 '11 at 18:53

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

score -1 · Answer 18 · edited Oct 17 '17 at 13:04

-1

Use:

parent.jQuery.fancybox.update();

edited Oct 17 '17 at 13:04

Phonolog

6,321
3
36
64

answered Oct 17 '17 at 12:25

Arjan

31
3

How do you resize Fancybox at runtime?

18 Answers18

Linked