Fade-in Slideshow: selected a few images from a pool of many

[billymortz]

1) Script Title: Ultimate Fade-in slideshow (v1.51)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: No problem, but a pretty cool enhancement (I think)

I am using this script for my site, and I was trying to come up with a way to select only a few images (from a pool of many) to display in the slideshow. The issue I found is that the more images you load into the fadeimages[] array, the longer the page takes to load as it has to load all the images in the array before the slideshow can begin. As the slideshow on my site is fairly large and the images are all full-color jpegs...well you get the idea. I have added to the original code a way to define a large pool of images, say 100, and then randomly select 5 of out of the 100 to display in the show. Every time you reload the page, 5 new random images are selected for the show. Plus if you set the order as Random with the "R" parameter, you'll have random random images... Here is the code I added, along with the modified fadeimages[] array:

//DEFINE ALL IMAGE PATHS IN THE IMAGE POOL
var imagepool=new Array()
imagepool[0]="images/slideshow/1.jpg";
imagepool[1]="images/slideshow/2.jpg";
imagepool[2]="images/slideshow/3.jpg";
imagepool[3]="images/slideshow/4.jpg";
imagepool[4]="images/slideshow/5.jpg";
imagepool[5]="images/slideshow/6.jpg";
imagepool[6]="images/slideshow/7.jpg";
imagepool[7]="images/slideshow/8.jpg";
imagepool[8]="images/slideshow/9.jpg";
imagepool[9]="images/slideshow/10.jpg";
//AND SO ON FOR MANY IMAGES...

//GET THE TOTAL NUMBER OF IMAGES IN THE IMAGE POOL
var quantity = imagepool.length;

//SELECT FIVE UNIQUE RANDOM IMAGE PATHS
var randomimage1=Math.round(Math.random()*(quantity-1));

do {
var randomimage2=Math.round(Math.random()*(quantity-1))
}
while (randomimage2==randomimage1);

do {
var randomimage3=Math.round(Math.random()*(quantity-1))
}
while (randomimage3==randomimage1 || randomimage3==randomimage2);

do {
var randomimage4=Math.round(Math.random()*(quantity-1))
}
while (randomimage4==randomimage1 || randomimage4==randomimage2 || randomimage4==randomimage3);

do {
var randomimage5=Math.round(Math.random()*(quantity-1))
}
while (randomimage5==randomimage1 || randomimage5==randomimage2 || randomimage5==randomimage3 || randomimage5==randomimage4);

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
//ASSIGN THE RANDOMLY GENERATED IMAGE PATHS TO THE FADEIMAGES ARRAY
fadeimages[0]=[imagepool[randomimage1], "", ""] //plain image syntax
fadeimages[1]=[imagepool[randomimage2], "", ""] //plain image syntax
fadeimages[2]=[imagepool[randomimage3], "", ""] //plain image syntax
fadeimages[3]=[imagepool[randomimage4], "", ""] //plain image syntax
fadeimages[4]=[imagepool[randomimage5], "", ""] //plain image syntax

Of course you could assign more than 5 to be displayed, I just wanted to keep it light for faster loading. There's probably also a shorter way to code the random image paths, I'm a rookie. I've tested this and it seems to work great! Any thoughts?

[jscheuer1]

That sounds cool, and I will take your word for it that it works. I took another approach to this issue in constructing:

http://www.dynamicdrive.com/dynamici...army/index.htm

In it I use an incremental preload. That way the show may start as soon as the first, last and next images (3 images) are loaded. Then when you switch to the next or previous image, the surrounding next/previous is preloaded if it hasn't already been cached.

This script can be configured to look and act (from the user's point of view) just like the script you have modified, while at the same time retaining this incremental loading behavior.