Image Gallery, click through image viewer help Options

[eemorris]

Hi,
I'm having trouble trying to get an image gallery viewer to work properly. I found the script on dynamic drive, but it was set up to click through the images with buttons. When I changed the buttons to images, the script stopped working.

Here is the script:

<script type="text/javascript">

// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('../images/cch/sub/photoGallery/image1.jpg','../images/cch/sub/photoGallery/image2.jpg','../images/cch/sub/photoGallery/image3.jpg');

// DO NOT EDIT BELOW THIS LINE!
function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}

function ShowSlide(Direction) {
if (SlideReady) {
NextSlide = CurrentSlide + Direction;
if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
document.images['Screen'].src = Slides[NextSlide].src;
CurrentSlide = NextSlide++;
Message = (CurrentSlide+1) + ' / ' + Slides.length;
self.defaultStatus = Message;
if (Direction == 1) CacheNextSlide();
}
return true;
}
}

function Download() {
if (Slides[NextSlide].complete) {
SlideReady = true;
self.defaultStatus = Message;
}
else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
return true;
}

function CacheNextSlide() {
if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] ==
'string'))
{ // ONLY CACHES THE IMAGES ONCE
SlideReady = false;
self.defaultStatus = 'Downloading next picture...';
Slides[NextSlide] = CacheImage(Slides[NextSlide]);
Download();
}
return true;
}

function StartSlideShow() {
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
SlideReady = true;
ShowSlide(1);
}
</script>

And here is the code in the body:
<form name="SlideShow">
<table>
<tr>
<td><input type="image" name="Previous" src="../images/cch/sub/leftArrow.jpg" onclick="ShowSlide(-1)" /> </td>

<td align="right"><input type="image" name="Next" src="../images/cch/sub/rightArrow.jpg" onclick="ShowSlide(1)" /></td>
</tr>
</table>
</form>

And of course, else where on the page I have an image named "Screen"

I'm very new to javascript and any help would be appreciated!

[Christian J]

CODE

<input type="image">

is a kind of submit button, which submits the form so that the page is reloaded (making the slide show reset). Try using ordinary images instead.