Youtube視頻和圖像在SAME ColorBox中？

我試圖讓用戶點擊一組大拇指，這將打開一個彩盒並顯示相應的圖像/視頻。拇指可以指圖像或視頻，所以colorbox應該（希望）正確顯示它。我目前的實現工作，但我有兩個colorbox實例，一個用於視頻，另一個用於圖像。我希望能找到一種方法將兩者結合到同一個實例中，並允許兩者之間的導航......這甚至可能嗎？下面是我在做什麼：Youtube視頻和圖像在SAME ColorBox中？

<div id="imageGallery"> 
    <ul id="thumbs"> 
     @if (!string.IsNullOrEmpty(Model.Youtube)) 
     { 
      <li class="galleryImage"><a href="http://www.youtube.com/embed/@YoutubeId(Model.Youtube)" class="detailColorBox" id="youtubeVideo" 
      title=""><img src="http://img.youtube.com/vi/@YoutubeId(Model.Youtube)/1.jpg" alt="image thumb" /></a></li> 
     } 
     @foreach (var img in Model.Images) 
     { 
      <li class="galleryImage"><a href="@Html.ResolvePath(img, "710x560")" class="detailColorBox" 
rel="itemDetailGallery" title=""><img src="@Html.ResolvePath(img, "135x135")" alt="image thumb" /></a></li> 
     } 
    </ul> 
</div>

而一個腳本標籤中：

 $("a[rel='itemDetailGallery']").colorbox(); 

     $("#youtubeVideo").colorbox({iframe:true, innerWidth:425, innerHeight:344});

PS：我也試過有與YouTube視頻ID送入一個iframe，在顏色框顯示，但該也失敗了。

有什麼想法？

來源

2011-05-03 Kassem

你能否接受這個問題的答案，因爲它正在對谷歌發現，這將避免混亂。 – sg3s 2012-06-26 11:24:37

嘗試......

$(".detailColorBox").colorbox({rel:'group1'}); 
$("#youtubeVideo").colorbox({rel:'group1',iframe:true, innerWidth:425, innerHeight:344});

來源

2011-11-23 06:37:23 Deps

這個作品應該被接受爲答案。它在尋找如何結合YouTube和圖片時很容易在Google上彈出。 – sg3s 2012-06-26 11:23:40

防雷工程與open:true屬性：

$("#youtubevideo").colorbox({open:true,rel:'group-video',iframe:true, innerWidth:425, innerHeight:344});

來源

2015-04-22 12:41:35 Jry

Youtube視頻和圖像在SAME ColorBox中？

回答

相關問題