使用链接启动 ColorBox 幻灯片

Question

我想要一个包含图片库和幻灯片的页面。当我单击链接时应开始幻灯片放映，当我单击其中一张图像时应使用普通的 ColorBox。

我现在所做的是将所有图像用 rel 进行分组。对于幻灯片链接，我使用以下代码：

<a rel="slideshow" href="#">Display slideshow</a>

在 colorbox 的配置中，我将 rel 定义为我用于图像的 rel。这几乎有效，我遇到的问题是我在开始时得到一个额外的空白页面。

如何使用文本链接开始图库的幻灯片放映？

Answer 1

我搜索了很长时间如何做到这一点，最后在 - 还有哪里 - Colorbox 的常见问题解答上找到了答案。不过，该示例的措辞略有不同，因此它并不像您想象的那么容易找到。特别是如果你像我一样用这些术语提出问题。

<div style="display:none;"> <!-- optionally hide this div -->
    <a rel="gallery" href="/slideshow/one.jpg">Caption 1</a>
    <a rel="gallery" href="/slideshow/two.jpg">Caption 2</a>
    <a rel="gallery" href="/slideshow/three.jpg">Caption 3</a>
</div>
<a id="openGallery" href="#">Display slideshow</a>

<script type="text/javascript">
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
    e.preventDefault();
    $gallery.eq(0).click();
});
</script>

http://jacklmoore.com/colorbox/faq/#faq-click