jQuery colorbox畫廊混合圖像和視頻

Question

即時通訊使用colorbox插件，我想包括一些視頻畫廊看到這個代碼：http://jsfiddle.net/29Bb4/基本上視頻不加載時下一個項目加載任何想法？

當我使用這樣的：

$(".group1").colorbox({rel:'group1', iframe:true, width:"80%", height:"80%"});它打破畫廊效果：

• 還是有，我可以同時使用圖像和視頻任何好的彈出插件？

Answer 1

由於在你的問題中，你允許替代解決方案/插件，我建議你使用fancybox。這裏是你的示例html的演示。

http://jsfiddle.net/lucuma/Skpyw/3/

http://fancyapps.com/fancybox/

<p><a class="group1" rel="group1" href="http://www.jacklmoore.com/colorbox/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> 
     <p><a class="group1" rel="group1" href="http://www.jacklmoore.com/colorbox/content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p> 
     <p><a class="group1" rel="group1" href="http://www.jacklmoore.com/colorbox/content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p> 

     <p><a class='group1 fancybox.iframe' rel="group1" href="http://www.youtube.com/embed/KHy7DGLTt8g?rel=0" title="video">Video (Iframe/Direct Link To YouTube)</a></p> 


$(".group1").fancybox({ 
     maxWidth : 800, 
     maxHeight : 600, 
     fitToView : false, 
     width  : '70%', 
     height  : '70%', 
     autoSize : false, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none' 
}); 

$('#btnOpen').click(function(e) { 
    e.preventDefault(); 
    $('.fancybox:eq(0)').click(); 
}); 

Answer 2

那麼你有你的兩個內容類型（圖片和iframe中）不同的設置。很容易將它們顯示爲同一組，但您必須單獨定義它們的設置：

$(".group1").colorbox({rel:'group1'}); 
$(".iframe").colorbox({rel:'group1', iframe:true, width:"80%", height:"80%"});