基于内容大小的fancybox 2动态宽度(Fancybox 2 Dynamic Width Bas

2019-07-29 21:36发布

我已经得到了通过的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的基于内容的宽度? 与我的测试文件,它是围绕400像素宽,的fancybox本身被设置为830/800像素宽(外部和内部宽度): 太宽的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()); 
    }); 
}

编辑:增加了IFrame的页面我试图加载到的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>

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

...摆脱玩家的封装尺寸。



Answer 2:

iframe的宽度目前不计算。 也许你可以设置宽度/高度这样每个IFRAME - http://jsfiddle.net/vVKMF/



Answer 3:

添加autoSize到:

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

要么 :

fitToView  : true,


文章来源: Fancybox 2 Dynamic Width Based on Content Size