jQuery 你如何在运行时调整 Fancybox 的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/994876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you resize Fancybox at runtime?
提问by Jason Norris
Does anyone know how to resize the jQuery Fancybox during runtime?
有谁知道如何在运行时调整 jQuery Fancybox 的大小？
When initializing the fancybox I can do this:
初始化fancybox时，我可以这样做：
$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });
I am filling the fancybox with dynamic content and I want it to resize according to the content.
我正在用动态内容填充fancybox，我希望它根据内容调整大小。
回答by Jason Norris
If you are using version 1.3 of Fancybox, there is a resize method:
如果您使用的是 Fancybox 1.3 版，则有一个调整大小的方法：
$.fancybox.resize();
$.fancybox.resize();
For version 2.x of Fancyboxthe same would be done with:
$.fancybox.update()
$.fancybox.update()
Which will resize the active fancybox based on the size of the content inside it.
这将根据其中内容的大小调整活动的花式框的大小。
回答by dandu
Alan's solution is incomplete because the box is no longer centered on the screen after modifying the size (at least with the latest jquery and fancybox versions).
Alan 的解决方案是不完整的，因为修改大小后框不再居中在屏幕上（至少在最新的jquery 和fancybox 版本中）。
So, the complete solution would be:
所以，完整的解决方案是：
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();
回答by tibalt
$("#fancybox-wrap").width(width); //or height or whatever
$("#fancybox-wrap").width(width); //或高度或其他
$.fancybox.center();
$.fancybox.center();
回答by Santosh Sonarikar
Hey after fighting almost two days, I managed to change overlay height. Hope this can be helpful :
嘿，经过近两天的战斗，我设法改变了叠加高度。希望这会有所帮助：
$('#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');
}
}
});
What this code doing is, it first calculate height of body, #fancybox-content and #fancybox-overlay. Then it check whether body's height is less than overlay's height, if yes then it assign new calculated height to overlay otherwise it take default body's height
这段代码的作用是，它首先计算 body 的高度，#fancybox-content 和 #fancybox-overlay。然后检查body的高度是否小于overlay的高度，如果是，则将新的计算高度分配给overlay，否则采用默认的body高度
回答by rentheitroadb
I just want to make you be aware of it.
我只是想让你意识到这一点。
After searching for solutions using javascript to adjust height me and my partner realized something stunning.
在搜索使用 javascript 调整高度的解决方案后，我和我的搭档意识到了一些惊人的事情。
Check whether the containing elements of #fancybox-inner has PADDING or MARGIN set.
检查#fancybox-inner 的包含元素是否设置了 PADDING 或 MARGIN。
This is the key element (direct children of #fancybox-inner margin/padding definition.
这是关键元素（#fancybox-inner margin/padding 定义的直接子元素。
The children elements (#fancyfox-inner > div > .here) can have padding, but dont forget to adjust:
子元素（#fancyfox-inner > div > .here）可以有填充，但不要忘记调整：
$('#element').fancybox({
'onComplete' : function(){
$.fancybox.resize();
}
});
回答by Luciano Marinho
I did find one solution to this bug after searching for it a long time in Google but not finding anything.
在 Google 上搜索了很长时间但没有找到任何东西后，我确实找到了解决此错误的方法。
To resize the box to the width and height of the page and center it, do this:
要将框调整为页面的宽度和高度并将其居中，请执行以下操作：
$("#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();
}
});
});
回答by Alan Plum
If Fancybox was part of jQuery UI, you'd do it like this:
如果 Fancybox 是 jQuery UI 的一部分，你会这样做：
$("tag").fancybox.option('frameWidth', 500);
But as it doesn't seem to provide such a method, you need to set the CSS directly:
但是好像没有提供这样的方法，需要直接设置CSS：
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
回答by no?name
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();
}
and call it on event when you need... (eg. uploadify onSelect event -> long file list makes fancybox so big, and we calculate height again)
并在需要时在事件上调用它......（例如uploadify onSelect 事件-> 长文件列表使fancybox 变得如此之大，我们再次计算高度）
... 'onSelect' : function(event,ID,fileObj){
overlay();
}, ...
回答by byzanth
My solution was like that (for fancybox 1.3.4):
我的解决方案是这样的（对于fancybox 1.3.4）：
find
找
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
$.fancybox.center(true);
};
and replace with
并替换为
$.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);
};
回答by vimal prakash
This method works for me. :)
这个方法对我有用。:)
$(".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();
