Changing images in an array

Josh404 · 12-02-2008, 04:17 AM

i have been modifying some javascript i found to change images.

below are two example pages.

I want the image to change when the user clicks the left or right arrow under the picture.

However, i am finding the 'PREV' (<) arrow doesn't work until the user clicks the 'NEXT' (>) arrow. then it works fine. also, the user sometimes has to click the 'NEXT' arrow twice before it responds. I can't work out why. Should i be preloading the images?

http://uoregon.edu/~josh/gallery_js/bench.html

http://uoregon.edu/~josh/gallery_js/light.html

and the javascript:

http://uoregon.edu/~josh/gallery_js/gallery.js

any ideas?

thanks.

vwphillips · 12-02-2008, 10:03 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<SCRIPT LANGUAGE="JavaScript" SRC="http://uoregon.edu/~josh/gallery_js/gallery.js"></SCRIPT>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var imageArray=new Array();
var numImages = 0;

function loadImageArray(picnum,projectName)
{
	for (i=0; i<picnum; i++)
	{
		imageArray[i]=new Image();
		imageArray[i].src="http://uoregon.edu/~josh/gallery_js/images/"+projectName+(i+1)+".jpg";
	}
	numImages = picnum;
}
loadImageArray('3','campbench');

var curImage=0;
var nextImage=0;

function swapImage(direction)
{
	if (document.images)
	{
		if(direction == "NEXT")
		{
			nextImage=curImage+1;
			if (nextImage>=numImages)
				nextImage=0;
			if (nextImage == -1)
				nextImage = numImages-1;
		}
        else if(direction == "PREV"){
			nextImage=curImage-1;
			if (nextImage>=numImages)
				nextImage=0;
			if (nextImage == -1)
				nextImage = numImages-1;
		}else if(direction == ""){
				nextImage=0;
		}
    if (imageArray[nextImage] && imageArray[nextImage].complete)
    {
      var target=null;
      if (document.images.MainImage)
        target=document.images.MainImage;
      if (document.all && document.getElementById("MainImage"))
        target=document.getElementById("MainImage");

      target.src=imageArray[nextImage].src;
      curImage=nextImage;
    }
  }
}


/*]]>*/
</script></head>

<body>


	<div id="content">
		<IMG SRC="http://uoregon.edu/~josh/gallery_js/images/campbench1.jpg" ID="MainImage" NAME="MainImage" width="590" height="444" alt="Camp/Bench"></IMG>

		<div id="arrows"><a href="javascript:swapImage('PREV');"><</a> <a href="javascript:swapImage('NEXT');">></a></div>
	</div>

</div>
</body>
</html>