Fancybox 2动态宽度基于内容大小
我有一个IFrame通过Fancybox 2打开播放video：
HTML：
File Name 使用Javascript：
$("a.fancybox-video").fancybox({ scrolling : 'no', type : 'iframe', helpers : { title: null } });
video是用户上传的，所以我不知道大小。 我最终将在Fancybox上设置maxHeight和maxWidth，但我已将其删除以便于排除故障。
如何根据内容设置Fancybox的宽度？ 使用我的测试文件，大约400px宽，fancybox本身被设置为830 / 800px宽（外部和内部宽度）： 太宽的fancybox的屏幕截图http://img528.imageshack.us/img528/3872/ fancyboxwidth.png
autoSize和fitToView没有任何效果。 IFrame页面上没有设置默认宽度的CSS或代码。 如果我强制Fancybox代码中的宽度，它可以工作，但由于我的内容是动态的，它不适用于实时系统。
我也试过调整另一个问题的function，询问高度resize，但它也不起作用：
beforeShow : function() { $('.fancybox-iframe').load(function() { $('.fancybox-inner').width($(this).contents().find('body').width()); }); }
编辑：添加了我正在尝试加载到Fancybox的IFrame页面的代码：
var max_video_width = 924; jwplayer("preview").setup({ flashplayer: "/VideoPlayer/player.swf", controlbar: "bottom", file: "/videos/file_name", stretching: 'file_name', autostart: true, events: { onMeta: function(event) { if (get_meta) { if(event.metadata.width != undefined && event.metadata.height != undefined) { get_meta = false; if (event.metadata.width > max_video_width) { var new_height = (max_video_width / (event.metadata.width / event.metadata.height)) jwplayer("preview").resize(max_video_width,new_height); jwplayer("preview").stop(); $('##preview_wrapper').width(max_video_width).height(new_height); } else { jwplayer("preview").resize(event.metadata.width,event.metadata.height); jwplayer("preview").stop(); $('##preview_wrapper').width(event.metadata.width).height(event.metadata.height); } $('.loading-video').slideUp('fast',function(){$('.loading-video').remove()}); } } } } });
查看你的intro-file.cfm文件会让事情变得更加清晰。
如果文件中的代码工作正常，我认为您可以从preview_wrapper容器中获取维度。
只有两个问题：
- 如果你在
$('.loading-video').slideUp()中使用$…，例如，$('.loading-video').slideUp()，你不应该在你的intro-file.cfm文件中包含jquery.js文件吗？ - 在
$('##preview_wrapper').width()的选择器之前是双##$('##preview_wrapper').width()是否正确？
假设一切正常，请尝试包含在您的fancybox脚本中：
scrolling: "no", // optional to avoid scrollbars inside fancybox beforeShow: function(){ this.width = $('.fancybox-iframe').contents().find('#preview_wrapper').width(); this.height = $('.fancybox-iframe').contents().find('#preview_wrapper').height(); }
…从玩家的包装中获取尺寸。
目前尚未计算iframe宽度。 也许你可以像这样为每个iframe设置宽度/高度 – http://jsfiddle.net/vVKMF/
将autoSize添加到：
$("a.fancybox-video").fancybox({ scrolling : 'no', type : 'iframe', autoSize : true, helpers : { title: null } });
要么 ：
fitToView : true,