Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
Here's how we can turn our lightbox image gallery into a slideshow:
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: '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:
slideshowSpeed to set the number of milliseconds each photo will be displayed. If we don't want the slideshow to automatically play, we can set slideshowAuto to false. We can change the text that appears in the link to start and stop the slideshow by passing in values for the slideshowStart and slideshowStop keys, respectively. That would all look like this:$('a[rel="ireland"]').colorbox({
transition: 'none',
width: '90%',
height: '60%',
slideshow: true,
slideshowSpeed: 2000,
slideshowAuto: false,
slideshowStart: 'Let\'s get started!',
slideshowStop: 'Ok, that\'s enough.'
With this code, we've set up our slideshow to show each photo for 2 seconds (2000 milliseconds), to not start the slideshow automatically, and to customize the text on the links that start and stop the slideshow.
Note that each key/value pair is separated by a comma, but that there's no comma after the last key/value pair. No comma after the last one is only important for Internet Explorer — if you accidentally put a comma after the last key/value pair in Internet Explorer, it will throw an error and none of your JavaScripts will work. Other browsers will ignore the error and continue to work gracefully. Always test your work in Internet Explorer before you make it available to the public.
Let's talk for a minute about the \' that appears in the text I want to use for the link to start and stop the slideshow. Since these are strings, I have to wrap them in quote marks, either 'single' quote or "double" quotes will work, and it's a matter of personal preference which you choose. If I want to then use quote marks in my string, I have to escape them I have to escape them — which is the JavaScript way of saying I have to tell JavaScript that those are part of my string and not characters that JavaScript should pay attention to.
If I were to write my string this way:
slideshowStart: 'Let's get started!'
this would cause an error. As far as JavaScript is concerned, the ' in Let's is the closing single quote for the string — and JavaScript has no idea what to do with the rest of the line.
In this case, if my personal preference were for using double quotes for writing strings, I wouldn't have to do anything at all. This would be perfectly acceptable:
slideshowStart: "Let's get started!"
Since we're using double quotes around our string, there's no chance that JavaScript will accidentally read it as the end of our string. Once JavaScript sees an opening " character, it automatically looks for the matching ending " character.
Now that we've got our slideshow customized, refresh the page in the browser and click one of the image thumbnails to open the Colorbox. The only visible difference is the addition of the Let's get started link. Clicking it kicks off the slideshow and switches the link to say Ok, that's enough, so that we can stop the slideshow.