使用fancybox打开包含嵌入式YouTube视频的图库

Question

我需要在我的网页上有一个链接，指出“视频”，当它被点击时，fancybox图库会打开第一个显示的一个或多个视频。有没有人有如何做到这一点的例子？

This stackoverflow post明确解释如何打开一个窗口与一个Youtube视频。我想打开一个带有“下一个”和“后退”按钮的画廊来导航视频。例如，下面是一些我必须用iFrame打开一个div的代码。我显然需要更新包含视频的div的“id”来使用“class”，所以我可以有多个。但我不知道如何改变href，然后知道要加载什么。将其更改为“.myVid”不起作用。

$("a#myTest").fancybox({ 
    'transitionIn': 'elastic', 
    'transitionOut': 'elastic', 
    'speedIn': 600, 
    'speedOut': 200, 
    'overlayShow': false, 
    'type': 'inline' 

}）;

<a id="myTest" href="#myVid" rel="group1">display video gallery</a> 

<div style="display:none"> 
<div id="myVid" rel="group1" style="height: 400px;" ><iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/9QrFa3tDwvY" frameborder="0" allowfullscreen="true"></iframe></div></div> 

这是Fancybox站点的示例，显示如何使用rel属性对项目进行分组。但是他们的示例仅显示了如何对网页上已显示的内容进行分组，以及启动幻灯片放映的链接是幻灯片中的项目之一。我想要一个单独的链接来启动我的。

$("a.grouped_elements").fancybox(); 


<a class="grouped_elements" rel="group1" href="Image1.jpg"><img src="Image1.jpg" height="20" width="20" alt=""/></a> 
<a class="grouped_elements" rel="group1" href="Image2.jpg"><img src="Image2.jpg" height="20" width="20" alt=""/></a> 

这是另一个'差不多'的例子。虽然它存在的问题是，它想要打开的图库中的第一项是空白的...因为它是打开图库的超链接的项目。

<a class="video_elements" rel="shadowbox">launch videos</a> 

<div style="display:none"> 
<a href="http://www.youtube.com/v/znyMx58fZqQ" class="video_elements" rel="shadowbox">video link </a> 
<a href="http://www.youtube.com/v/znyMx58fZqQ" class="video_elements" rel="shadowbox">video link </a></div> 

<script type="text/javascript"> 

$("a.video_elements").fancybox({ 
    'transitionIn' : 'fade', 
    'transitionOut' : 'fade', 
    'titlePosition' : 'inside', 
    'autoscale' : 'true', 
    'type' : 'swf' 
}); 

感谢。

Answer 1

这一个将为你工作，但不会分组你的YouTube视频。

 $(document).ready(function(){ 
      $('a.video_elements').click(function(event){ 
       event.preventDefault(); 
       $.fancybox({ 
       'titleShow'  : false, 
       'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
       'type'  : 'swf', 
       'swf'  : {'wmode':'transparent','allowfullscreen':'true'} 
       }); 
      }); 
    }); 

但你可以通过fancybox的“onComplete”选项来手动完成。 这里有一个很好的例子：

'onComplete' : function() { 
    $("#fancybox-wrap").hover(function() { 
      $("#fancybox-left").show(); 
      $("#fancybox-right").show(); 
     }, function() { 
      $("#fancybox-left").hide(); 
      $("#fancybox-right").hide(); 
     }); 
    }