你如何在运行时调整Fancybox的大小？
有没有人知道如何在运行时调整jQuery Fancybox的大小？
初始化fancybox时我可以这样做：
$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 }); 我正在用动态内容填充fancybox，我希望它根据内容resize。
如果您使用的是Fancybox 1.3版，则有一个resize方法：
$ .fancybox.resize（）;
对于Fancybox的2.x版本，可以使用以下方法：
$ .fancybox.update（）
这将根据其中的内容大小调整活动fancybox的大小。
Alan的解决方案不完整，因为在修改大小后，该框不再位于屏幕中心（至少使用最新的jquery和fancybox版本）。
因此，完整的解决方案是：
$("#fancy_outer").css({'width': '500px', 'height': '500px'}); $("tag").fancybox.scrollBox();
$（ “＃的fancybox缠绕”）宽度（宽度）。 //或高度或其他什么
$ .fancybox.center（）;
嘿战斗了近两天后，我设法改变了叠加高度。 希望这会有所帮助：
$('#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。 然后它检查身体的高度是否小于叠加的高度，如果是，则它将新的计算高度分配给叠加，否则它采用默认身体的高度
我只是想让你意识到这一点。
在使用javascript搜索解决方案后调整高度我和我的伙伴意识到了令人惊叹的事情。
检查#fancybox-inner的包含元素是否设置了PADDING或MARGIN。
这是关键元素（#fancybox-inner margin / padding definition的直接子元素。
子元素（#fancyfox-inner> div> .here）可以有填充，但不要忘记调整：
$('#element').fancybox({ 'onComplete' : function(){ $.fancybox.resize(); } });
我在谷歌搜索了很长时间但没有找到任何东西后，确实找到了这个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(); } }); });
如果Fancybox是jQuery UI的一部分，你可以这样做：
$("tag").fancybox.option('frameWidth', 500);
但由于它似乎没有提供这样的方法，您需要直接设置CSS：
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
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(); }, ...
$ .fancybox.resize（）; 对我不起作用，所以我把这段代码放到fancybox iframe里面的加载页面中：
$(document).ready(function(){ parent.$("#fancybox-content").height($(document).height()); });
您也可以在回调中设置它：
$("#mydiv").toggle('fast', function(){ parent.$("#fancybox-content").height($(document).height()); });
我也在努力调整fancybox的大小。 解决方案是$.fancybox.reposition();
奇迹般有效！
我的解决方案就是这样（对于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); };
这种方法适合我。 🙂
$(".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();
我刚刚在其Google群组https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8上向Fancybox发布了一个建议的补丁，该补丁添加了一个公共方法$ .fancybox.reshow（）。 这将重新计算fancybox的高度和宽度。 它适用于window.onorientationchange和window.onresize，例如：
window.onresize = function() { $.fancybox.reshow(); }
这是我的解决方案：
$("#linkpopup").fancybox({ 'titlePosition' : 'inside', 'transitionIn' : 'none', 'transitionOut' : 'elastic', 'onComplete' : function(){ $.fancybox.resize(); } });
感谢所有为StackOverflow.com做出贡献的人。 你们都多次为我做过救命。 现在，我终于得到了一些贡献。 以下是我在运行时quandry上调整resize fancybox的方法：
我为href元素指定了特定属性，并将尺寸传递给PHP vars。 然后调用并在click事件中设置属性，其中嵌入了fancybox控制function和参数…
LINK $(".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(); } }); });
就我而言，我正在使用Fancybox来显示一个只包含图像的非常简单的网页。 此图像的大小可能不同。 我的问题是图像不包括style="height: NNpx; width: NNpx;" 。 没有它，fancybox autoSize可能会产生意想不到的结果（在他们的文档http://fancyapps.com/fancybox/中说明 ）。
tl; dr：为autoSize提供宽度和高度属性以使其正常工作。
在Fancybox 3 （最新版本）
parent.jQuery.fancybox.getInstance().update();
参考： http ： //fancyapps.com/fancybox/3/docs/#iframe
使用：
parent.jQuery.fancybox.update();