logo标签列表

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

jqueryresizefancybox
26

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

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

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

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

你不能只设置内容并再次调用fancybox吗？ - rossipedia
18个回答
1
我的解决方案是这样的（适用于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);
};
谢谢你节省了我的时间.. +1 - Toretto
1
我也曾经为调整fancybox大小而苦恼。 解决方法是$.fancybox.reposition(); 非常好用！
0
我刚刚在Fancybox的Google Group https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8上发布了一个建议的补丁，它添加了一个公共方法$.fancybox.reshow()。这将重新计算fancybox的高度和宽度。它可以与window.onorientationchange和window.onresize一起使用，例如：
window.onresize = function() {
    $.fancybox.reshow();
}
0

这是我的解决方案：

$("#linkpopup").fancybox({
    'titlePosition'     : 'inside',
    'transitionIn'      : 'none',
    'transitionOut'     : 'elastic',
    'onComplete' : function(){
        $.fancybox.resize();
    }
});
0
0
感谢所有为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();

      }
  });
});
0
在我的情况下，我使用Fancybox显示一个只包含图像的非常简单的网页。这个图像可能大小不一。我的问题是，该图像没有包括style="height: NNpx; width: NNpx;"。没有这个东西，fancybox的autoSize可能会产生意想不到的结果(在他们的文档http://fancyapps.com/fancybox/中说明)。
总之，为了使autoSize正常工作，请提供宽度和高度属性。
-1

使用：

parent.jQuery.fancybox.update();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接