CSS Photo Shuffler : i am a camera

CSS Photo Shuffler

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.

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.

comment feed 02 Nov 2006 07 Nov 2006 15

// 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"; };

1 04 Nov 2006

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

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

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

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

8 07 Nov 2006

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.

10 22 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.

12 26 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)

13 28 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!

15 07 Dec 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 ; ).

i am a camera my kids are cameras too

search

CSS Photo Shuffler