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">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Thank you, but I wanted to know if there is a simple way of altering this code to get there. The other galleries use different methods of achieving this effect and also, they are much more fancy in style; I want a very simple look as displayed in the attachment.

I appreciate that you could simplify the style but I am not good enough at Javascript to know which bits to amend.

Any thoughts on whether it is possible to get the image numbers showing with this code?(please see initial post)

Cheers!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.