Preloaded Slide Show Script Modification

[seloh77]

Preloaded Slide Show Script

http://www.dynamicdrive.com/dynamici...eloadslide.htm

I want to modify the script so that is loops through all the pictures. I mean when it comes at the last picture in the array and you click the next-button it goes to the first picture in the array and when you're at the first picture of the array and you click the previous-button it goes to the last picture in the array.

I tried a modification myself that worked for the next-button at the last picture but completely disabled the previous-button.
Now I've made this modification to the ShowSlide function that works for the next-button at the last picture and doesn't disable the previous-button but it still does not work for the previous-button at the first picture:
if ((NextSlide >= 0) && (NextSlide < Slides.length))
{
document.images['Screen'].src = Slides[NextSlide].src;
CurrentSlide = NextSlide++;
Message = 'Picture ' + (CurrentSlide+1) + ' of ' + Slides.length;
self.defaultStatus = Message;
if (Direction == 1) CacheNextSlide();
}
else if (NextSlide == Slides.length)
{
document.images['Screen'].src = Slides[0].src;
CurrentSlide = 0;
}

Any help, ideas and/or suggestions would be appreciated.
Thanks in advance!

seloh

[seloh77]

I finally adapted it myself by a lot of trial and error.
For anybody that is interested here is the adapted code:

<script language="JavaScript" type="text/javascript">
<!--
	//adapted version of 'preloaded slideshow script' by Jason Moon - http://www.dynamicdrive.com/dynamicindex14/preloadslide.htm
	//original version could only go from beginning to end and back
	//this version goes to the first picture if your at the last picture and click next, identical behavior for the first picture

	function CacheImage(ImageSource)
	{
		var ImageObject = new Image();
		ImageObject.src = ImageSource;
		return ImageObject;
	}

	function ShowSlide(Direction)
	{
		if (SlideReady)
		{
			if ((CurrentSlide == -1) && (Slides.length > 1))
			{
				Slides[Slides.length-1] = CacheImage(Slides[Slides.length-1]);
			}

			if ((CurrentSlide == 0) && (Direction == -1))
			{
				NextSlide = Slides.length + Direction
				document.images['Screen'].src = Slides[NextSlide].src;
				CurrentSlide = Slides.length-1
			}
			else
			{
				NextSlide = CurrentSlide + Direction;

				if ((NextSlide >= 0) && (NextSlide < Slides.length))
				{
					document.images['Screen'].src = Slides[NextSlide].src;
					CurrentSlide = NextSlide++;

					if (Direction == 1) CacheNextSlide();
				}
				else if (NextSlide == Slides.length)
				{
					document.images['Screen'].src = Slides[Slides.length-NextSlide].src;
					CurrentSlide = 0;
				}
				return true;
			}
		}
	}

	function Download()
	{
		if (Slides[NextSlide].complete)
		{
			SlideReady = true;
		}
		else setTimeout("Download()", 100);
		return true;
	}


	function CacheNextSlide()
	{
		if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] == 'string'))
		{
			SlideReady = false;
			Slides[NextSlide] = CacheImage(Slides[NextSlide]);
			Download();
		}
		return true;
	}

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

<script language="JavaScript" type="text/javascript">
<!--
	var Slides = new Array('image01.jpg','image02.jpg','imageN.jpg');
//-->
</script>

I sepperated the var Slides from the rest of the code so that all the functions can be put in an external JS-file.

<img id="Screen" name="Screen"> //the img-tag where the pictures apear
<a onclick="ShowSlide(-1)">previous</a>
<a onclick="ShowSlide(1)">next</a>

[northshore]

This works great! Thank-you.. Anyway to modify this so you can have more than one slideshow on a page - currently when i try to add another slideshow on the same page - only the first slideshow works all others do not function..

[seloh77]

You can't use this script for multiple slideshows. It depends on the id Screen and the array Slides. You'll have to make these unique within the functions.