使用链接开始ColorBox幻灯片放映 [英] Starting ColorBox slideshow using a link

问题描述

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

I would like to have a page with both an image gallery and a slideshow. The slideshow should be started when I click the link, the normal ColorBox should be used when I click one of the images.

我现在要做的是对所有图像进行归类.对于幻灯片链接，我使用以下代码:

What I do now is group all the images with a rel. For the slideshow link I use the following code:

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

在colorbox的配置中，我将rel定义为用于图像的rel.这几乎可以正常工作，但我遇到的问题是，一开始我会得到一个额外的空白页.

In the configuration for colorbox I define rel as the rel I use for the images. This works almost, the problem I have with this is that I get an extra empty page at the beginning.

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

How can I start a slideshow of an image gallery, using a text link?

推荐答案

我搜索了很长时间，然后终于在Colorbox的F.A.Q上找到了答案.尽管该示例的措词略有不同，所以它并不像您想象的那样容易找到.尤其是如果您像我一样用这些术语问问题.

I searched for how to do this for a long time, and finally found the answer on - where else - the F.A.Q for Colorbox. The example is worded a bit differently though so it wasn't as easy to find as you might think. Especially if you're asking question in these terms, like I was.

<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幻灯片放映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！