CSS Photo Shuffler

02 Nov 2006 by Carl Camera

For a while now, I've been looking for a Flash application that would perform the ubiquitous photo slideshow that I see on so many of the sites featured at Godbit (godbit.com now defunct).

Then I came across Richard Rutter's CSS Image Fades page last week. Cool, I thought. If I can fade from an image to a background, why stop there? Once a background image is fully visible, I could move it to the image tag, set its opacity to 100 percent, then slide a different image underneath it.

At that point, I could fade to the new background image. Rinse and repeat -- and we have the beginnings of the CSS Photo Shuffler. No Flash required.

Feel free to use Photo Shuffler wherever you like and customize it however you want. I'm releasing it under the Creative Commons Attribution v2.5 license.

Update: Encouraged by someone actually wanting to use this script, I've updated the shuffler to make each image clickable. Now on display at the CSS Linked Photo Shuffler demo page.

Show 15 Comments

Comments

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 $10-$20 to have this done. (and you could still give it out for free to everyone).

David 04 Nov 2006

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

jason cipriani 05 Nov 2006

@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. :-)

Carl Camera 05 Nov 2006

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.

Giovanni 05 Nov 2006

@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.

Carl Camera 05 Nov 2006

Thanks for this - very nice script!

David 06 Nov 2006

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

drs18 06 Nov 2006

@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.

Carl Camera 07 Nov 2006

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

juglesh 09 Nov 2006

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.

Carl Camera 22 Nov 2006

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

Marcus Thompson 25 Nov 2006

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)

Esther 26 Nov 2006

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!

Spencer 28 Nov 2006

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.

Carl Camera 29 Nov 2006

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  &lt;  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 ; ).

Gerhard 07 Dec 2006