使用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(); 
     }); 
    }