Tutorial #17
Simple Slideshow Intermediate   2013-11-13

Introduction

There are hundreds of scripts out there for displaying a series of images in a slideshow. The one I use is from Jon Raasch. It does the job with a minimum of code and CSS.

This tutorial shows you how to add the script to your site, with captions supplied for each image. The result looks like this:

Demo 1 screenshot for this tutorial


Step by Step

1: Select the images that you want to display and make sure they are the same size. You can have as many as you want.

2: Copy the example code into the body of your web page then jump to the next section. In production you would put the script and CSS in the head block of your page.


Understanding the Code

The example code has three parts - the script, some CSS definitions and a block of HTML.

The HTML consists of a div with the id slideshow which contains a div for each image.

Each of these contains an img tag that sources one of your images. In this example, each is wrapped with a a tag which makes each image into a clickable link. If you don't need that feature then just remove the a tag pair.

Each image is followed by a short caption, which is optional.

Note that the first of the inner divs has class="active" which marks it as the first image in the series.

Below the outer div are two buttons which are used to stop and start the slideshow.


The style block contains CSS for the divs and img tags. Adjust the image height to suit your images and make the other height definitions large enough to include the image and the caption. The images in this demo are 300 px in height.

What the CSS does is to place all the images on top of each other with the active one 'on top' of the others, by which I mean it has the highest z-index.


The script has one main function called slideSwitch. Every time the function is called it changes the z-index of the next image in the list so it appears on top of the others. It performs an animation on the previous and current images, changing their opacity over 1000 milliseconds so that one morphs smoothly into the next.

The $(function() block is called when the page loads and setInterval( "slideSwitch()", 5000 ) calls slideSwitch every 5000 milliseconds. In other words this changes the images every 5 seconds in a continuous loop.

The continuous changing can become a bit annoying so I have added two buttons with event handlers. The two $("body").on('click',... blocks stop and start the slideshow by calling clearInterval and setInterval respectively, as well as hiding or showing the relevant button.

Once you have the demo working with your images, try changing the time passed to setInterval and the values passed to the .animate() call in the script to create different transition effects. See the jQuery documentation to see what options are available.


Jon's code is &copy 2008 Jon Raasch and is distributed under the FreeBSD License. You can download his original code HERE.


Code for this Tutorial


Share this tutorial


Related Tutorials

34 : Image Thumbnails and Lightboxes   (Intermediate)

39 : Fullscreen API   (Intermediate)


Comment on this Tutorial


comments powered by Disqus