Hi everybody, I have written a javascript slideshow with pause-play-next-previous buttons, but the images are too many and users have to wait too long especially with slower connections - i wonder if anybody can suggest a way to implement the script with increment preloading of the first images or a similar trick. i am copying my code below but i also copy first this link:

http://wsabstract.com/script/script2...entslide.shtml

which is an example of increment loading slideshow working very good! my problem is i am quite new to javascript and i wouldnt know how to customize it in order to take away the link function, that i dont need, and add captions and buttons

Any advice in one of the two directions (working on my own script below or customizing the linked one above) would be very very appreciated!
I do know some jquery plugin could do but i am trying to go more into the code, even though i still need a lot of advices and tutorials, the goal is solving this specific problem+learning!

Here my code (just 2 images here in the list to make it shorter for you, the complete list is more than 50 pics!):

<script language="JavaScript">
<!--
var interval = 8000;
var random_display = 0;
var imageDir = "portraits/";
var imageNum = 0;

didascalieArray = new Array();
imageArray = new Array();
didascalieArray[imageNum] = "caption1";
imageArray[imageNum++] = new imageItem(imageDir +
"image1.jpg");
didascalieArray[imageNum] = "caption2";
imageArray[imageNum++] = new imageItem(imageDir +
"image2.jpg");


var totalImages = imageArray.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}

else {
imageNum = (imageNum+1) % totalImages;
}
var new_image = get_ImageItemLocation(imageArray

[imageNum]);

document.getElementById("didascalia").innerHTML =

didascalieArray[imageNum];
return(new_image);
}

function getPrevImage() {
if(imageNum-1 < 0) {
imageNum = totalImages-1;
}
else
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray

[imageNum]);
document.getElementById("didascalia").innerHTML =

didascalieArray[imageNum];
return(new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

function switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

// -->

</script>