有人知道如何在运行时调整jQuery Fancybox的大小吗?
当初始化fancybox时,我可以这样做:
$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });
我正在用动态内容填充fancybox,我希望它能根据内容调整大小。
$.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.reposition();
非常好用!window.onresize = function() {
$.fancybox.reshow();
}
这是我的解决方案:
$("#linkpopup").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'elastic',
'onComplete' : function(){
$.fancybox.resize();
}
});
关于Fancybox 3(最新版本)
parent.jQuery.fancybox.getInstance().update();
<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();
}
});
});
style="height: NNpx; width: NNpx;"
。没有这个东西,fancybox的autoSize可能会产生意想不到的结果(在他们的文档http://fancyapps.com/fancybox/中说明)。使用:
parent.jQuery.fancybox.update();