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 t

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

<styletype="text/css">.fancybox-nav {
height: 80%;
}
</style><scripttype="text/javascript">
    $(document).ready(function() {
  $(".fancybox").fancybox({
        autoSize: true,
        helpers : { 
          title : { type : 'inside' }
          }, // helpersbeforeLoad: 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:

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