使用链接启动ColorBox幻灯片

Question

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

我现在所做的就是将所有图像与rel相关联。对于幻灯片链接，我使用以下代码：

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

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

如何使用文本链接启动图片库的幻灯片？

Answer 1

我搜索了很长一段时间如何做到这一点，并最终找到了答案 - 其他地方 - 彩盒的F.A.Q。这个例子的措辞有点不同，尽管如此，它并不像你想象的那么容易找到。特别是如果你用这些术语提问，就像我一样。

<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