Question

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

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

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

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

如何使用文字链接开始图库的幻灯片演示？

Answer 1

我长时间搜索了如何做到这一点，最后找到了答案 - 其他地方 - 用于Colorbox的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

使用链接启动ColorBox幻灯片

1 个答案: