Just a little for loop to preload all the images (particularly useful for slow connections) and prevent all that unecessary copy & pasting if images are in a batch (0 > 10 etc.):

 // slightly modified to suit our needs
 var gblImg = new Array;
 // path that will be the same for all images 
 var gblImgPath = "/web/path/to/images/";
 // loop that preloads all images, 9 in our case
 for (var i=0; i  <  9; i++) { 
   gblImg[i] = new Image;
   gblImg[i].src = gblImgPath + [i] + ".jpg";
 };

Make sure you change all gblImg[i] to gblImg[i].src in the script

Enjoy ; ).

Spencer, just follow this link to the CSS Photo Shuffler Page and then view the source of the page. The XTHML, CSS, and JavaScript are all there in one neat package.

Could you send me an example of the HTML document that would contain the CSS that you talk about for this Javascript? I am really new and trying to learn how to do this, but am having some troubles. Thanks for your help!

I came across this script looking for something to use in my photo portfolio and ended up wanting to do more... I'd like to set up a grid of images that all shuffle through the same array of images at random. I was able to get the script working so that it would shuffle randomly through the array for one image, but not the whole grid. (This is because the script works on the first image with an ID matching on the one specified in the script, no?) So, do you have any recommendations on this project? (work in progress: http://partypictures.estherswhite.net)

I'm also having the flash-back behavior in FF2.0. Works great in IE6 and IE7.

After some investigation, the flash-back behavior seems to be related to cache settings in browsers.

For instance, drs18 reports the behavior in Mac/Firefox, but I have reports of proper behavior from friends running Mac/Firefox in OSX and OS 10.

I've sent email and an alternative solution to drs18 and juglesh but have yet to hear back whether the problem was solved with javascript image preloading.

I see the same problem as drs18 on IE6 but not FF1.5 (winXP)

@David

Thanks for visiting. Send an URL if you use it.

@drs18

Sorry about that -- I don't own a Mac. I really lean on Mac folks to let me know if something doesn't look right -- so thanks for letting me know. I was viewing the demo page in Opera/Win and I think it may have the same problem but only occasionally. I'll look into this.

Very elegant in Mac Safari. In Mac Firefox, the previous image snaps back into view for a second after the cross fade.

Thanks for this - very nice script!

@Giovanni

Thanks! We've both been working on that it seems. As I was working on David's suggestion, I figured others could benefit, so I created a CSS Linked Photo Shuffler demonstration page. I Hope folks find it useful.

I admire the elegance of linking to the same page as the name of the photo. That would require no additional array definition.

Nice script. I've made some changes in order to make it cycle forever and link to an html file with the same name of the image shown. I've also added some php to generate automatically the deck array. Maybe i'll add an ini file to store a destination path and alternative text for each image.

Again, nice job.

@David

Having each image link to its own href could be accomplished by setting up a second array the same size as the image array and setting the href attribute after the shuffle. I'll email an example to you.

Yeah, 999 rotations would, for all practical purposes, be the same as "forever."

@Jason

Thanks for the correction. If I had earned an English degree, that would have been embarrassing. :-)

great you went to stanford. good for you, way to work that in there, i'm impressed! also you spelled exercise wrong.

Hi, I just wanted to ask if there was a way to make it so that each image in the rotation was linked to a larger image, allowing me to use Lightbox or something similar?

Ie Image loads, user clicks on it...lightbox takes over shows larger image. User gets rid of larger image, and clicks on the next image in the rotation.

Also I was wondering if it was easy enough to make it cycle through the images forever? Or should I just put an incredible value like 999?

Let me know. I'd even be willing to pay ~dollar~10-~dollar~20 to have this done. (and you could still give it out for free to everyone).