Fancybox2 with images and video in the same group using JWPlayer 6

问题

I'm trying to create a gallery group that mixes images and video, with the video using JWPlayer6.

I have each working as separate groups, but I can't workout how to integrate the two.

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

回答1:

Ok, I'm not sure this is what JFK was suggesting but this seems to work, although there must be a more efficient way to do it:

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

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

来源：https://stackoverflow.com/questions/15343716/fancybox2-with-images-and-video-in-the-same-group-using-jwplayer-6

标签

javascript

fancybox

jwplayer