使用 fancybox 打开一个包含嵌入式 youtube 视频的画廊答案

【问题标题】：Using fancybox to open a gallery that contain embedded youtube videos使用 fancybox 打开一个包含嵌入式 youtube 视频的画廊
【发布时间】：2011-03-26 16:17:24
【问题描述】：

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

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'
});

谢谢。

【问题讨论】：

你有没有尝试过？请发布您的代码。
你发现了吗？

标签： jquery fancybox

【解决方案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(); 
        }); 
     }

【讨论】：