Hello
I am a complete novice so apologies in advance. I want to have a gallery on my website that looks something like the attachment. There is an image in the middle cell of the table and the current image number in the top cell as part of the navigation buttons (prev 1/9 next).
I have got as far as making the buttons change the image when clicked on but I cannot work out how to make the number change as well (2/9, 3/9 etc) when each new image comes up (please see the code below).
Is there an easy way of doing this?
Many thanks for any assistance offered!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<p>
<script language="JavaScript"><!--
which_image = 0;
NUMBER_OF_IMAGES = 5;
var x;
ImageNames = new Object();
ImageNames.length = NUMBER_OF_IMAGES - 1;
for (counter = 0; counter < NUMBER_OF_IMAGES; counter++){
file_number = counter + 1;
x = counter + 1;
filename = ("images_1/" + file_number + ".jpg");
ImageNames[counter] = filename;
}
function changeImage(direction) {
which_image += direction;
if (which_image < 0)
which_image = NUMBER_OF_IMAGES - 1;
if (which_image == NUMBER_OF_IMAGES)
which_image = 0;
if (document.images)
document.myimage.src = ImageNames[which_image];
}
//--></script>
<script type="text/javascript">
document.write(which_image);
</script
></p>
<table width="600" height="661" border="0" cellpadding="5">
<tr>
<td><input type="button" value="<<" onclick='changeImage(-1);' />
<input type=button value=">>" onclick='changeImage(1)' /></td>
</tr>
<tr>
<td><img src="images_1/1.jpg" name=myimage width=400 height=500 /></td>
</tr>
<tr>
<td height="112"> </td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
