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

Question

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

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

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

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

Answer 1

使用：

parent.jQuery.fancybox.update();

Answer 2

如果你使用的是Fancybox 1.3版本，有一个调整大小的方法：

$.fancybox.resize();

对于 Fancybox 的 2.x 版本，执行相同操作：

$.fancybox.update()

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

Answer 3

Alan 的解决方案是不完整的，因为修改大小后框不再位于屏幕中心（至少对于最新的 jquery 和 fancybox 版本）。

所以，完整的解决方案是：

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

Answer 4

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

$.fancybox.center();

Answer 5

嘿，经过近两天的战斗，我设法改变了覆盖高度。 希望这会有所帮助：

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

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

Answer 6

我只是想让你意识到这一点。

在寻找使用 javascript 调整高度的解决方案后，我和我的伙伴发现了一些令人惊叹的事情。

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

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

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

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

Answer 7

在谷歌搜索了很长时间但没有找到任何东西后，我确实找到了这个错误的解决方案。

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

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

Answer 8

如果Fancybox是jQuery UI的一部分，你会这样做：

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

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

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

Answer 9

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

}, ...

Answer 10

$.fancybox.resize(); 对我来说不起作用，所以我将此代码放入加载的页面中，在 fancybox iframe 内：

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

您也可以在回调中设置它：

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

Answer 11

我也很难调整 fancybox 的大小。
解决方案是 $.fancybox.reposition();

非常有效！

Answer 12

我的解决方案是这样的（对于 fancybox 1.3.4）：

查找

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


        $.fancybox.center(true);
    };

并替换为

$.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 13

这个方法对我有用。 :)

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

我刚刚在其 Google 群组 https://groups.google 上发布了 Fancybox 的建议补丁.com/forum/#!topic/fancybox/fuUuBJyTrH8 添加公共方法 $.fancybox.reshow()。 这将重新计算 fancybox 的高度和宽度。 它适用于 window.onorientationchange 和 window.onresize，例如：

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

Answer 15

这是我的解决方案：

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

Answer 16

感谢所有为 StackOverflow.com 做出贡献的人。 你们多次成为我的救星。 现在，我终于可以做出一些贡献了。 下面是我如何克服运行时调整 fancybox 大小的困惑：

我分配了 href 元素特定属性，并将维度 PHP 变量传递给它。
然后在点击事件中调用并设置属性，其中嵌入了 fancybox 控制函数和参数......

<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 17

就我而言，我使用 Fancybox 来显示一个非常简单的网页，其中仅包含图像。 该图像的大小可能有所不同。 我的问题是图像不包含 style="height: NNpx; width: NNpx;"。 如果没有这个，fancybox autoSize可能会给出意想不到的结果（在他们的文档http://fancyapps.com/fancybox/ ).

tl;dr：提供宽度和高度属性，以便 autoSize 正常工作。

Answer 18

关于Fancybox 3（最新版本）

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

参考： http://fancyapps.com/fancybox/3/docs/#iframe