Question

我正在使用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>

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

Answer 1

你可以在元素上使用rel属性（就像你现在拥有的那样），但我建议使用colorbox的rel属性。你可以这样做：

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

您需要单独指定图像和iframe的设置，但是它们需要具有相同的rel属性值，以便插件知道它们应该组合在一起。

Answer 2

由于这个原因，它可能无法正常工作：

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

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

更改为以下内容：

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

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

Answer 3

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

jQuery Colorbox幻灯片显示不同的内容

3 个答案: