Time for action – creating a slideshow

We'll keep working with the files we created in the previous section. Here's how we can turn our lightbox image gallery into a slideshow:

1. Open scripts.js. We're going to add another key/value pair to our settings. To create a slideshow inside our Colorbox, set the slideshow key to true:

   $('a[rel="ireland"]').colorbox({
     transition: 'none',
     width: '90%',
     height: '70%',
     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. You will see your Colorbox similar to the one shown in the following screenshot:

   

2. Colorbox provides a few more keys that we can use to control the slideshow. We can provide a value for slideshowSpeed to set the number of milliseconds for which each photo will be displayed. If we don't want the slideshow to automatically...