2

我正在使用 jQuery Colorbox [ http://www.jacklmoore.com/colorbox ] 来制作幻灯片。我似乎无法弄清楚如何让它适用于不同的内容（图像、视频、iframe、内联元素等）

<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>

请记住，我需要他们按顺序展示，我们将不胜感激，

4

3 回答 3

2

您可以在元素上使用 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-06T13:49:22.663 回答
0

它可能无法正常工作，因为：

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

如果您注意，您应该注意到您的引号不正确，这应该会给您一个解析错误。

更改为以下内容：

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

注意选择器开头和结尾的单引号。

于 2013-02-05T21:39:36.167 回答
0

如果您查看文档，请.colorbox({slideshow:true})设置带有自动幻灯片的图片库

于 2013-08-13T17:58:08.877 回答