jQuery Colorbox幻燈片不同的內容

我使用jQuery Colorbox [http://www.jacklmoore.com/colorbox]做幻燈片。我似乎無法弄清楚如何使不同的工作內容（圖片，視頻，內部框架，內聯元素等）jQuery Colorbox幻燈片不同的內容

<p><a class="image" href="ohoopee1.jpg" rel="slideshow">An image</a></p> 
<p><a class="video" href=""http://www.youtube.com/embed/617ANIA5Rqs?rel=0&amp;wmode=transparent" rel="slideshow">a Youtube video - should be iframed</a></p> 
<p><a class="page" href="http://stackoverflow.com" rel="slideshow">a page, should be iframed.</a></p> 
<p><a class="image" href="ohoopee2.jpg" rel="slideshow">Another image</a></p>

在這個例子中，有圖像和iframe中。如果我使用

<script> 
$("a[rel="slideshow"]").colorbox({slideshow:true}); 
</script>

YouTube和IFRAME不顯示（無法加載內容）

我測試了另一種方法，它的工作原理，但它第一次顯示所有圖像，然後視頻（不按順序）。像這樣：

<script> 
    var $slideshow = $('.image').colorbox({...}); 
    $slideshow.push ($('video').colorbox({iframe:true, ...})); 
    $slideshow.eq(0).click(); 
</script>

請記住，我需要他們爲了顯示和任何幫助，將不勝感激，

來源

2013-02-05 mindbodyheart09

它可能不工作，因爲這樣：

<script> 
$("a[rel="slideshow"]").colorbox({slideshow:true}); 
</script>

如果你注意你應該注意到你的引號是不正確的，這會給你一個解析錯誤。

做以下修改：

<script> 
$('a[rel="slideshow"]').colorbox({slideshow:true}); 
</script>

注意在選擇的開始和結束的單引號。

來源

2013-02-05 21:39:36 Ares

你可以在元素上使用rel屬性（就像你現在有的那樣），但是我會推薦使用colorbox的rel屬性。你可以做這樣的事情：

$('.image').colorbox({rel:'slideshow', slideshow:true}); 
$('.iframe, .video').colorbox({iframe:true, width:500, height:500 rel:'slideshow', slideshow:true});

您需要分別指定圖像和iframe中的設置，但他們需要有rel屬性相同的值，以便插件知道他們應該被組合在一起。

來源

2013-02-06 13:49:22 Jack

如果您查看文檔，.colorbox({slideshow:true})會設置帶有自動幻燈片的圖片庫

來源

2013-08-13 17:58:08

jQuery Colorbox幻燈片不同的內容

回答

相關問題