Here's how we can turn our lightbox image gallery into a slideshow:
Open
scripts.js
. We're going to add another key/value pair to our settings. To create a slideshow inside our Colorbox, set theslideshow
key totrue
:$('a[rel="ireland"]').colorbox({ transition: 'none', width: '90%', height: '60%', slideshow: true });
Now if you refresh the page in the browser, you'll see that after you open the Colorbox, it automatically cycles through the images, using whichever transition effect you've chosen. A link is provided so that site visitors can stop the slideshow at any time:
Colorbox provides a few more keys we can use to control the slideshow. We can provide a value for
slideshowSpeed
to set the number of milliseconds each photo will be displayed. If we don't want the slideshow to automatically play, we can setslideshowAuto
tofalse
. We can change the text that appears in the link to start and stop the slideshow by passing in...