Simple rotating picture gallery for a website

by David Halls


Chatelherault Hunting Lodge, near Hamilton, South Lanarkshire

Rotating picture galleries are now becoming quite popular on websites. This article shows how to produce this with some simple Javascript.

I recommend that this type of effect should be used with caution. Rotating images and animation can become quite irritating when you are trying to read the text on a page.

To illustrate this, I have used some images of Chatelherault Hunting Lodge taken on a sunny October day (a rarity in 2009!). The Lodge dates from 1734 and was designed by William Adam for the Duke of Hamilton. Currently it forms the centrepiece of Chatelherault Country Park owned by South Lanarkshire Council.

The images

The images should be reduced to their final size (in this example, 650 x 250px ) and then optimised for web use. In Adobe Photoshop, you use the "Save for web" option whereas in Paint Shop Pro, you "Export" using the "JPEG optimiser".

If you have neither of these, I can recommend the free Faststone Image Viewer. With this, you use "Save As" and then click on the button "Options", which allows you to choose the degree of lossless compression. I use a value of about 27 which produces much smaller files with no visible loss of quality.

The array of images

We construct an array in Javascript containing the relative URLs of the images. Note that the items in the array are between inverted commas and that they are separated by commas. There should be no comma after the last entry.

 
Within the <head> section of the page:

<script language="Javascript" type="text/javascript">
<!--
var imglist = new Array (
"chatelherault/chatel1.jpg",
"chatelherault/chatel2.jpg",
"chatelherault/chatel3.jpg",
"chatelherault/chatel4.jpg"
)
//-->
</script>

The Javascript functions to display and rotate the images

In the body of the page, we add an img with an id of myimage.

To the Javascript in the head section, we add a function, showimg, which requires a variable, arrayno, to allow the correct image to be displayed. It changes the source of the image, myimage.

A second function, rotateImages, uses the Javascript method setTimeout to change the images after a set interval. SetTimeout requires two parameters, a function to call and the time interval in milliseconds before the function is called. In this case, setTimeout calls its own function after 4 secs, so that it effectively goes round in a loop calling the next highest number image in the array. The first line in the function checks whether rhe array number is at the limit for the array. If it is, it resets the variable i to zero.

Within the <body> section of the page:

<img id = "myimage" / > 

and within the Javascript in the <head> of the page:

function showimg(arrayno) {
myimage.src = imglist[arrayno];
}

var i = 0;
function rotateImages(i)
{if (i >=imglist.length) i = 0;
showimg(i);
var t1= setTimeout ("rotateImages("+(i+1)+")",4000);
}

Styling the images

The CSS is relatively straightforward. It just requires the width, height and border properties for the image, myimage.

<style type = "text/css">

#myimage {
width: 650px;
height:250px;
border:1px solid black;
}
</style>

References

Article Date: 23rd November 2009.