Fancybox 2基于内容大小的动态宽度 [英] Fancybox 2 Dynamic Width Based on Content Size
问题描述
我有一个通过Fancybox 2播放视频的IFrame:
I've got an IFrame being opened via Fancybox 2 that plays a video:
HTML:
<a class="fancybox-video" href="/user/intro-file.cfm" rel="file_name" title="View Video">File Name</a>
Javascript:
Javascript:
$("a.fancybox-video").fancybox({
scrolling : 'no',
type : 'iframe',
helpers : {
title: null
}
});
视频是用户上传的,所以我不知道大小。我将最终在Fancybox上设置一个maxHeight和maxWidth,但我已经删除它们以便于更容易的故障排除。
The video is user-uploaded, so I don't know the size. I will be setting a maxHeight and maxWidth on the Fancybox eventually, but I've removed them for easier troubleshooting.
如何根据内容设置Fancybox的宽度?我的测试文件大约是400像素宽的,这个fancybox本身被设置为830/800像素宽(外部和内部宽度): screencap的太宽的fancybox http://img528.imageshack.us/img528/3872/fancyboxwidth.png
How can I set the width of the Fancybox based on the content? With my test file, which is around 400px wide, the fancybox itself is being set to 830/800px wide (the outer and inner widths): screencap of too-wide fancybox http://img528.imageshack.us/img528/3872/fancyboxwidth.png
autoSize和fitToView没有任何效果。在设置默认宽度的IFrame页面上没有CSS或代码。如果我强制在Fancybox代码中的宽度是有效的,但是由于我的内容是动态的,它将不适用于现场系统。
autoSize and fitToView have no effect. There's no CSS or code on the IFrame page that is setting a default width. If I force a width in the Fancybox code it works, but since my content is dynamic, it won't work for the live system.
我还尝试调整功能从另一个问题的问题,关于高度调整大小,但它也不起作用:
I also tried adapting a function from another question asking about height resizing, but it didn't work either:
beforeShow : function() {
$('.fancybox-iframe').load(function() {
$('.fancybox-inner').width($(this).contents().find('body').width());
});
}
编辑:添加了我要加载的IFrame页面的代码Fancybox:
Added the code of the IFrame page I'm trying to load into the Fancybox:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<cfoutput>
<script type="text/javascript" src="/Javascript/jwplayer.js"></script>
<script type='text/javascript'>
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()});
}
}
}
}
});
</script>
</cfoutput>
</body>
</html>
推荐答案
查看您的 file.cfm
文件使事情变得更清楚。
Looking at your intro-file.cfm
file makes things clearer.
如果文件中的代码正常工作,我认为你可以从
If your code inside the file is working fine, I think that you could get the dimensions from the preview_wrapper
container.
只有两个问题:
- 如果您在
$('。loading-video')中使用
$
...。slideUp()例如,您不应该在intro-file.cfm $ c $中包含
jquery.js
文件c>文件? - 是
$('## preview_wrapper')中的选择器之前的双重
正确?##
).width()
- if you are using
$
... in$('.loading-video').slideUp()
for instance, shouldn't you be including thejquery.js
file inside yourintro-file.cfm
file? - is this double
##
before the selector in$('##preview_wrapper').width()
correct?
假设一切正常,那么尝试在您的fancybox脚本:
Assuming that everything is working fine, then try including in your fancybox script:
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();
}
...从播放器的包装器中获取尺寸。
... to get the dimensions from the player's wrapper.
这篇关于Fancybox 2基于内容大小的动态宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!