Preloaded Slide Show Script Modification

[seloh77]

Preloaded Slide Show Script

http://www.dynamicdrive.com/dynamicindex14/preloadslide.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.