Starting ColorBox slideshow using a link

问题

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>

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?

回答1:

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

来源：https://stackoverflow.com/questions/8282401/starting-colorbox-slideshow-using-a-link