resize - 在运行时,如何调整Fancybox的大小?

谁知道如何在运行时调整jQuery Fancybox的大小?

初始化fancybox时,我可以执行以下操作:


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

我在用动态内容填充fancybox,并且希望它根据内容调整大小。

时间:

如果使用的是Fancybox的版本1.3,就有resize方法:

$.fancybox.resize();

对于Fancybox的2.x版本,同样可以用:

$.fancybox.update()

它将根据内部内容的大小调整活动fancybox的大小。

完整的解决方案是:


$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();

$("#fancybox-wrap").width(width); //or高度或其他

$.fancybox.center();

检查#fancybox-inner的包含素是否有填充或边距集。

这是关键元素( fancybox-inner margin/padding definition的直接子元素)。

子素(


 $('#element').fancybox({
 'onComplete' : function(){
 $.fancybox.resize();
 }
}); 

要调整框的大小为页面的宽度和高度,并使它居中,请执行以下操作:


$("#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'});

希望这有助于:


$('#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');
 }
 }
});


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();

}

当你需要的时候调用他,


... '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.reposition();

...