Fancybox2與圖像和視頻在同一組使用JWPlayer 6

Question

我試圖創建一個畫廊組，混合圖像和視頻與視頻使用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> 

Answer 1

好吧，我不知道這是肯尼迪是在暗示，但這似乎工作，但必須有做更有效的方式：

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

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