...

View Full Version : Changing images in an array



Josh404
12-02-2008, 05: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, 11:03 AM
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum