Fancybox 2 基于内容大小的动态宽度答案

【问题标题】：Fancybox 2 Dynamic Width Based on Content SizeFancybox 2 基于内容大小的动态宽度
【发布时间】：2012-06-13 21:18:43
【问题描述】：

我通过 Fancybox 2 打开了一个播放视频的 IFrame：

HTML：

<a class="fancybox-video" href="/user/intro-file.cfm" rel="file_name" title="View Video">File Name</a>

Javascript：

$("a.fancybox-video").fancybox({
    scrolling   : 'no', 
    type        : 'iframe', 
    helpers     : { 
        title: null 
    }
});

视频是用户上传的，所以我不知道大小。我最终会在 Fancybox 上设置 maxHeight 和 maxWidth ，但我已经删除了它们以便于排除故障。

如何根据内容设置 Fancybox 的宽度？我的测试文件大约 400px 宽，fancybox 本身被设置为 830/800px 宽（外宽和内宽）：screencap of too-wide fancybox http://img528.imageshack.us/img528/3872/fancyboxwidth.png

autoSize 和 fitToView 无效。 IFrame 页面上没有设置默认宽度的 CSS 或代码。如果我在 Fancybox 代码中强制设置宽度，它可以工作，但由于我的内容是动态的，它不适用于实时系统。

我还尝试从另一个询问高度调整大小的问题中调整一个函数，但它也不起作用：

beforeShow  : function() { 
    $('.fancybox-iframe').load(function() { 
        $('.fancybox-inner').width($(this).contents().find('body').width()); 
    }); 
}

编辑：添加了我尝试加载到 Fancybox 的 IFrame 页面的代码：

<!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>

【问题讨论】：

那个Iframe的内容是否来自同一个域？
The video is user-uploaded, so I don't know the size ... 视频是否至少有一个您可以识别的选择器？ .... intro-file.cfm 是否具有共同的 html 结构，还是因用户而异？ ...在这种情况下，您应该显示 intro-file.cfm 的呈现 html 代码。
这个$(this).contents().find('body').width() 永远不会工作，因为body 将始终以浏览器或包含它的 iframe 的 100% 宽度呈现，除非您为标签设置了特定的 css 尺寸。
@Zuul：是的，它在同一个域中 - 甚至域上的同一个文件夹。
@JFK：intro-file.cfm 确实有一个通用的 HTML 结构。我已将 intro-file.cfm 页面的代码添加到我的问题中。感谢您对 body.width 尝试的澄清。

标签： jquery iframe dynamic fancybox sizing

【解决方案1】：

查看您的intro-file.cfm 文件会让事情更清楚。

如果文件中的代码运行良好，我认为您可以从 preview_wrapper 容器中获取尺寸。

只有两个问题：

例如，如果您在$('.loading-video').slideUp() 中使用$ ...，您不应该将jquery.js 文件包含在您的intro-file.cfm 文件中吗？
$('##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();
  }

...从播放器的包装中获取尺寸。

【讨论】：

#1 - jquery 实际上是通过 cfinclude 包含的，我只是省略了它，因为与我的问题无关。 #2 - 这是正确的，因为我在 ColdFusion 中编码，它使用 # 作为特殊字符。您的代码完美运行！感谢您帮助我解决这个问题。
对于任何看到这个的人来说，一个注释就是未来 - 我最终在计算的高度/宽度上添加了一些填充，因为我的播放器周围的白色 Fancybox 边框并不完全相同: this.width = $('.fancybox-iframe').contents().find('#preview_wrapper').width() + 15;
不错。如果我能在搜索中找到那个就好了！

【解决方案2】：

当前未计算 iframe 宽度。也许您可以像这样为每个 iframe 设置宽度/高度 - http://jsfiddle.net/vVKMF/

【讨论】：

我确实在搜索中看到了这一点，但我不确定它如何适用于我的情况。我可以在 iframe 上设置默认高度/宽度，但是我将如何根据 Fancybox 函数中的内容计算它？

【解决方案3】：

将autoSize 添加到：

$("a.fancybox-video").fancybox({
    scrolling   : 'no', 
    type        : 'iframe',
    autoSize    : true, 
    helpers     : { 
        title: null 
    }
});

或：

fitToView  : true,

【讨论】：

这些选项都不在 v2 文档中：fancyapps.com/fancybox/#docs
@shimmoril 试试autoSize:true,
@shimmoril 或fitToView : true,
来自我原来的问题：“autoSize 和 fitToView 没有效果。”