Javascript Fancybox2使用JWPlayer 6将图像和视频放在同一组中

我正在尝试创建一个画廊组，它混合了图像和视频，视频使用JWPlayer6

我让每个人都作为单独的小组工作，但我无法锻炼如何将两者结合起来

<!-- FancyBox to display images -->
<script type="text/javascript">
    $(document).ready(function() {
      $(".fancybox").fancybox({
        helpers : { 
      title : { type : 'inside' }
      }, // helpers
        beforeLoad: function(){
        }
      });
    });

<!-- FancyBox to display videos -->
<script type="text/javascript">
   $(document).ready(function() {
     $(".fancybox-video").fancybox({
        content: '<div id="video_container" style="">Loading video...</div><br>',
        autoSize: true,
        helpers : { 
          title : { type : 'inside' }
           }, // helpers
        beforeLoad: function(){
           this.title = $(this.element).attr('caption');
           },
        afterShow: function(){
           jwplayer("video_container").setup({
             flashplayer: "/static/js/libs/jwplayerjwplayer.flash.swf",
             file: this.href,
             autostart: 'true'
             }); // jwplayer setup
           } // afterShow
        }); // fancybox
 }); // on
</script>

$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox({
助手：{
标题：{type:'inside'}
}，//助手
加载前：函数（）{
}
});
});
$（文档）.ready（函数（）{
$（“.fancybox视频”）.fancybox({
内容：“正在加载视频…
”，
自动调整大小：正确，
助手：{
标题：{type:'inside'}
}，//助手
加载前：函数（）{
this.title=$（this.element）.attr（'caption'）；
},
afterShow:function（）{
jwplayer（“视频容器”）。设置({
flashplayer:“/static/js/libs/jwplayerjplayer.flash.swf”，
文件：this.href，
自动启动：“true”
})；//jwplayer设置
}//余波
})；//fancybox
}); // 在…上

好的，我不确定这是JFK的建议，但这似乎有效，尽管必须有更有效的方法：

<style type="text/css">
.fancybox-nav {
height: 80%;
}
</style> 

<script type="text/javascript">
    $(document).ready(function() {
  $(".fancybox").fancybox({
        autoSize: true,
        helpers : { 
          title : { type : 'inside' }
          }, // helpers
        beforeLoad: function(){
          if($(this.element).attr('containertype')=='video'){
            this.content = '<div id="video_container" style="">Loading the player ... </div><br>';
          };
          },
        afterShow: function(){
          if($(this.element).attr('containertype')=='video'){
            jwplayer("video_container").setup({
            flashplayer: "jwplayer.flash.swf",
            file: this.href,
            autostart: 'true'
          }); // jwplayer setup 
          }; 
        }// afterShow
   }); // fancybox
 }); // on
</script>

.fancybox导航{
身高：80%；
}
$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox({
自动调整大小：正确，
助手：{
标题：{type:'inside'}
}，//助手
加载前：函数（）{
if（$（this.element）.attr（'containertype'）='video'）{
this.content='正在加载播放器…
'；
};
},
afterShow:function（）{
if（$（this.element）.attr（'containertype'）='video'）{
jwplayer（“视频容器”）。设置({
flashplayer：“jwplayer.flash.swf”，
文件：this.href，
自动启动：“true”
})；//jwplayer设置
}; 
}//表演后
})；//fancybox
}); // 在…上

以及HTML：

<a class="fancybox" rel="group" title="Video 1" data-fancybox-type="anything" containertype="video" href="1.flv"><img src="1.png"/></a>
<a class="fancybox" rel="group" title="Image 2"  href="2.png"><img src="2.png"/></a>

您是否有一个示例，说明您试图将两者以及两者分别集成在一起？它们都需要使用相同的选择器并使用不同的

数据fancybox类型

属性。。。此外，您还有一个额外的

返回false；//防止不执行任何操作的默认值

。。。复制/粘贴的缺点之一；）那么我是否需要为JWPlayer部件创建自定义的“数据fancybox类型”？根据文档，

data fancybox type=“anything”

应该是“image”、“inline”、“ajax”、“iframe”、“swf”和“html”。。。我猜在您的情况下应该是

html

（图像通常是自动检测的，除非它们没有图像扩展名，所以在这种情况下，您必须指定

data fancybox type=“image”

），如果您指定

data fancybox type

，那么我猜您可以简化您的条件，如

If（this.type=“html”）

而不是

if（$（this.element）.attr（'containertype'）=='video'）

这很有意义。我确实觉得奇怪的是，它只在“data fancybox type”设置为某个值时才起作用。谢谢