有没有人知道如何在运行时调整jQuery Fancybox的大小?
初始化fancybox时我可以这样做:
$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });
我正在用动态内容填充fancybox,我希望它根据内容调整大小。
答案 0 :(得分:41)
如果您使用的是Fancybox 1.3版,则有一个调整大小的方法:
。$ fancybox.resize();
对于版本2.x of Fancybox,可以使用以下方法完成:
$。fancybox.update()
将根据其中内容的大小调整活动fancybox的大小。
答案 1 :(得分:11)
Alan的解决方案不完整,因为在修改大小后,该框不再位于屏幕中心(至少使用最新的jquery和fancybox版本)。
因此,完整的解决方案将是:
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();
答案 2 :(得分:4)
$( “#的fancybox缠绕”)宽度(宽度)。 //或高度或其他
。$ fancybox.center();
答案 3 :(得分:4)
$('#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。然后检查身体的高度是否小于叠加的高度,如果是,那么它将新的计算高度分配给叠加,否则它采用默认身体的高度
答案 4 :(得分:4)
我只是想让你意识到这一点。
使用javascript搜索解决方案以调整身高后,我的伙伴意识到了一些令人惊叹的事情。
检查#fancybox-inner的包含元素是否设置了PADDING或MARGIN。
这是关键元素(#fancybox-inner margin / padding definition的直接子元素。
子元素(#fancyfox-inner&gt; div&gt; .here)可以有填充,但不要忘记调整:
$('#element').fancybox({
'onComplete' : function(){
$.fancybox.resize();
}
});
答案 5 :(得分:4)
我确实找到了一个解决这个问题的解决方案,在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();
}
});
});
答案 6 :(得分:3)
如果Fancybox是jQuery UI的一部分,你可以这样做:
$("tag").fancybox.option('frameWidth', 500);
但由于它似乎没有提供这样的方法,您需要直接设置CSS:
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
答案 7 :(得分:2)
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事件 - &gt;长文件列表使fancybox如此之大,我们再次计算高度)
... 'onSelect' : function(event,ID,fileObj){
overlay();
}, ...
答案 8 :(得分:1)
$ fancybox.resize();对我不起作用,所以我把这段代码放到fancybox iframe里面的加载页面中:
$(document).ready(function(){
parent.$("#fancybox-content").height($(document).height());
});
你也可以在回调中设置它:
$("#mydiv").toggle('fast', function(){
parent.$("#fancybox-content").height($(document).height());
});
答案 9 :(得分: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();
答案 10 :(得分:1)
我也在努力调整fancybox的大小。
解决方案是$.fancybox.reposition();
像魅力一样!
答案 11 :(得分: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);
};
答案 12 :(得分:0)
在 Fancybox 3 (最新版本)
JSONObject jsonObj = new JSONObject(homeAddress);
答案 13 :(得分:0)
在我的情况下,我使用Fancybox显示一个只包含图像的非常简单的网页。此图像的大小可能不同。我的问题是图片没有包含style="height: NNpx; width: NNpx;"
。如果没有这个,fancybox autoSize可能会产生意想不到的结果(在他们的文档http://fancyapps.com/fancybox/中说明)。
tl; dr:为autoSize提供width和height属性以使其正常工作。
答案 14 :(得分:0)
感谢所有为StackOverflow.com做出贡献的人。你们都多次为我做过救命。现在,我终于得到了一些贡献。以下是我在运行时quandry上调整大小fancybox的方法:
我为href元素指定了特定属性,并将尺寸传递给PHP vars。 然后调用并在click事件中设置属性,其中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();
}
});
});
答案 15 :(得分:0)
这是我的解决方案:
$("#linkpopup").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'elastic',
'onComplete' : function(){
$.fancybox.resize();
}
});
答案 16 :(得分:0)
我刚刚在其Google群组https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8上向Fancybox发布了一个建议的补丁,该补丁添加了一个公共方法$ .fancybox.reshow()。这将重新计算fancybox的高度和宽度。它适用于window.onorientationchange和window.onresize,例如:
window.onresize = function() {
$.fancybox.reshow();
}
答案 17 :(得分:-1)
使用:
parent.jQuery.fancybox.update();