如何在运行时调整Fancybox的大小？

Question

有人知道如何在运行时调整jQuery Fancybox的大小吗？

当初始化fancybox时，我可以这样做：

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

我正在用动态内容填充fancybox，我希望它能根据内容调整大小。

- Swiftaxe

---

你不能只设置内容并再次调用fancybox吗？ - rossipedia

Answer 1

如果你使用的是Fancybox的1.3版本，那么有一个resize方法：

$.fancybox.resize();

对于Fancybox的2.x版本，可以使用相同的方法：

$.fancybox.update()

这将根据其内部内容的大小调整活动fancybox的大小。

- Jason Norris

---

这将只调整高度，而不是宽度。 - Björn

谢谢！这很有价值。对我来说，大多数情况下都是调整高度（由于表单错误消息）。 - vdboor

尝试使用fancybox 2.0.6的update()，但没有成功（宽度未更新，正如Hans所指出的那样）。使用fancybox 2.1.5，它可以工作，宽度和高度都被调整大小。 - Lez

Answer 2

Alan的解决方案不完整，因为在修改大小后，该框不再居中显示（至少在最新版本的jquery和fancybox中是如此）。

因此，完整的解决方案应为：

$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();

- dandu

Answer 3

嘿，在经过近两天的奋斗后，我成功地改变了覆盖层的高度。希望这能对您有所帮助：

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

这段代码的作用是，首先计算body、#fancybox-content和#fancybox-overlay的高度。然后它会检查body的高度是否小于overlay的高度，如果是，则将新计算的高度赋值给overlay，否则它会采用默认的body高度。

- Santosh S

Answer 4

我只是想让你知道这件事。

在使用JavaScript调整高度的解决方案时，我和我的伙伴意识到了一些惊人的事情。

检查#fancybox-inner包含元素是否设置了PADDING或MARGIN。

这是关键元素（#fancybox-inner直接子元素的margin/padding定义）。

子元素（#fancyfox-inner > div > .here）可以有padding，但不要忘记进行调整：

 $('#element').fancybox({
    'onComplete' : function(){
        $.fancybox.resize();
    }
}); 

- renoirb

Answer 5

在谷歌上搜寻了很久，但却未找到与此bug相关的内容。最终我找到了一个解决方案。

要将框的大小调整为页面的宽度和高度并居中，请执行以下操作:

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

- Luciano Marinho

Answer 6

$("#fancybox-wrap").width(width); //或高度或其他

$.fancybox.center();

这段代码涉及到修改fancybox的宽度（或者高度）以及居中显示。

- tibalt

Answer 7

如果Fancybox是jQuery UI的一部分，您可以这样做：

如果Fancybox是jQuery UI的一部分，您可以这样做：

$("tag").fancybox.option('frameWidth', 500);

但是由于它似乎没有提供这样的方法，所以您需要直接设置CSS：

$("#fancy_outer").css({'width': '500px', 'height': '500px'});

- Alan Plum

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

}

当你需要时，可以在事件上调用它...(例如，在uploadify的onSelect事件中，长文件列表会使fancybox变得很大，我们再次计算高度)

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

overlay();

}, ...

- nołname

Answer 9

$.fancybox.resize() 对我没有起作用，所以我把这段代码放到了 fancybox iframe 中加载的页面中：

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

你也可以在回调函数中设置它：

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

- Oli

Answer 10

这个方法对我有效。 :)

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

- vimal prakash