【发布时间】：2010-11-02 22:51:15
【问题描述】：
有人知道如何在运行时调整 jQuery Fancybox 的大小吗？
初始化fancybox时，我可以这样做：
$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });
我正在用动态内容填充花式框，我希望它根据内容调整大小。
【问题讨论】：
-
不能直接设置内容再调用fancybox吗？
【发布时间】：2010-11-02 22:51:15
【问题描述】：
如果你使用的是 1.3 版本的 Fancybox，有一个 resize 方法：
$.fancybox.resize();
对于版本2.x of Fancybox，同样的做法是：
$.fancybox.update()
这将根据里面内容的大小调整活动的幻想框的大小。
【讨论】：
-
这只会调整高度，而不是宽度。
-
谢谢！这是有价值的。对我来说，大部分时间都是关于调整高度的大小（由于形成错误消息）
-
用 fancybox 2.0.6 尝试了 update()，没有成功。 （正如 Hans 所说，宽度没有更新）使用 fancybox 2.1.5，它可以工作，宽度和高度都被调整了。
Alan 的解决方案是不完整的，因为在修改大小后框不再居中在屏幕上（至少对于最新的 jquery 和 fancybox 版本）。
所以，完整的解决方案是：
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();
【讨论】：
$("#fancybox-wrap").width(width); //或高度或其他任何东西
$.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。然后检查body的高度是否小于overlay的高度，如果是，则将新计算的高度分配给overlay，否则采用默认body的高度
【讨论】：
我只是想让你意识到这一点。
在寻找使用 javascript 调整高度的解决方案后，我和我的伙伴意识到了一些惊人的事情。
检查#fancybox-inner 的包含元素是否设置了PADDING 或MARGIN。
这是关键元素（#fancybox-inner margin/padding 定义的直接子元素。
子元素（#fancyfox-inner > div > .here）可以有内边距，但不要忘记调整：
$('#element').fancybox({
'onComplete' : function(){
$.fancybox.resize();
}
});
【讨论】：
在 Google 中搜索了很长时间但没有找到任何东西后，我确实找到了解决此错误的方法。
要将框调整为页面的宽度和高度并将其居中，请执行以下操作：
$("#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);
};
【讨论】：
-
感谢您节省我的时间.. +1
这种方法对我有用。 :)
$(".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 Group https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8 上向 Fancybox 发布了一个建议的补丁，其中添加了一个公共方法 $.fancybox.reshow()。这将重新计算花式框的高度和宽度。它适用于 window.onorientationchange 和 window.onresize，例如：
window.onresize = function() {
$.fancybox.reshow();
}
【讨论】：
这是我的解决方案：
$("#linkpopup").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'elastic',
'onComplete' : function(){
$.fancybox.resize();
}
});
【讨论】：
感谢所有为 StackOverflow.com 做出贡献的人。你们多次成为我的救命稻草。现在，我终于可以贡献一些东西了。以下是我在运行时如何克服调整大小幻想框的方法：
我用传递给它的维度 PHP vars 分配了 href 元素的特定属性。 然后在点击事件中调用并设置属性，其中嵌入了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();
}
});
});
【讨论】：
在我的例子中，我使用 Fancybox 来显示一个非常简单的网页，其中只包含一张图片。此图像的大小可能会有所不同。我的问题是图像不包含style="height: NNpx; width: NNpx;"。否则，fancybox autoSize 可能会产生意想不到的结果（在他们的文档http://fancyapps.com/fancybox/ 中说明）。
tl;dr：为 autoSize 提供宽度和高度属性以使其正常工作。
【讨论】：
在 Fancybox 3（最新版本）
parent.jQuery.fancybox.getInstance().update();
【讨论】：
用途：
parent.jQuery.fancybox.update();
【讨论】：