You are here: irt.org | Articles | JavaScript | Image | A JavaScript Picture Gallery [ previous next ]
Published on: Friday 20th November 1998 By: Ben Allen
A picture gallery is used in preference to having many pictures on one page. The idea is to have one image in the HTML page, which can be changed to show other images by clicking on the buttons underneath. To do this with the minimal amount of code we should name the pictures in a sequence, e.g. if we had 20 pictures, we would name them image1.jpg through to image20.jpg.
If we had to display 20 different pictures in our gallery, we could write 20 different functions to display each one. Instead when the page loads, we can create an array of file names. The code for this is shown below.
<script language="JavaScript"<!--
ImageNames = new Object();
ImageNames.length = 19; //Because arrays start at 0, the length is one
//less than the number of images.
for (counter = 0; counter < 20; counter++) {
file_number = counter + 1;
file_name = ("image" + file_number + ".jpg");
ImageNames[counter] = file_name;
}
//--></script>The for loop fills each element of the array with a corresponding file name. Because the array elements start at zero, and the files start at image1.jpg, the variable file_number is one higher than the variable counter. We create an array using new Object(), which is supported in early versions of JavaScript, whereas new Array() isn't.
Now we need to create a function for each button to call to "rotate" the images. The function will use a global variable to keep track of which image is currently being displayed. Each time the function is called it will load the next (or previous) image named in the ImageNames[] array into an image called myimage. The function will take an argument called direction, which tells it to go forward or backwards in the array. When the function is called direction will equal -1 or 1, depending on which image is to be loaded. It will also have two if control statements to make sure the global variable doesn't call image 21, which doesn't exist.
<script language="JavaScript"><!--
which_image_loaded = 0;
function changeImage(direction) {
which_image_loaded += direction;
if (which_image_loaded < 0)
which_image_loaded = 19; //Again, one less than the actual number of images.
if (which_image_loaded > 19)
which_image_loaded = 0;
if (document.images)
document.myimage.src = ImageNames[which_image_loaded];
}
//--></script>Only if the browser supports the images object will we actually alter the images source property.
Now we will create two buttons that look like this:
Each button calls the changeImage() function, but in a different direction:
<form> <input type="button" value="<<" onClick='changeImage(-1);'> <input type="button" value=">>" onClick='changeImage(1);'> </form>
The HTML for the image simply looks like:
<img src="image1.jpg" name="myimage">
If you prefer image buttons to the grey form buttons, then rather than using an image form tag, which won;t work in older versions of Netscape Navigator (as they didn;t originally support th onClick event handler, use image links:
<form> <a href="javascript:changeImage(-1)"><img src="back.gif" width="10" height="10"></a> <a href="javascript:changeImage(1)"><img src="forward.gif" width="10" height="10"></a> </form>
The above code is fine if you want to have a fixed number of images. But what if you are constantly adding images to your collection? The code would need to be edited in a number of places. The script below needs only be altered once to allow for new images.
<script language="JavaScript"><!--
which_image_loaded = 0;
NUMBER_OF_IMAGES = 20;
ImageNames = new Object();
ImageNames.length = NUMBER_OF_IMAGES - 1;
for (counter = 0; counter < NUMBER_OF_IMAGES; counter++){
file_number = counter + 1;
filename = ("image" + file_number + ".jpg");
ImageNames[counter] = filename;
}
function changeImage(direction) {
which_image_loaded += direction;
if (which_image_loaded < 0)
which_image_loaded = NUMBER_OF_IMAGES - 1;
if (which_image_loaded == NUMBER_OF_IMAGES)
which_image_loaded = 0;
if (document.images)
document.myimage.src = ImageNames[which_image_loaded];
}
//--></script>The constant NUMBER_OF_IMAGES is substituted into the script so that its value can be changed once to alter the entire script.
You can test the above using the following working example:
Macromedia Fireworks Image Map Tutorial