Demo
http://www.davidvanvickle.com/go.php?p=jquery-slideshow

Download code
http://www.davidvanvickle.com/examples/jquery/slideshow/slideshow.zip

jQuery
http://docs.jquery.com/Tutorials
http://jquery.com/

---

The Challenge

So you’ve got a bunch of pictures and you want to have a simple slideshow on your homepage. It doesn’t need controls. It just needs to take a folder full of pictures and display them automatically, one at a time, in random order, without repeating a picture before it’s shown all the pictures. That’s what we’ve got this week. It’s a Javascript and jQuery-powered slideshow app.

About jQuery

The app starts with jQuery, which is a Javascript library for animation and AJAX work. Implementation means simply downloading the JS file from jQuery.com and including it with our project. I have to admit, I’m new to jQuery so I’m relying on the expertise of another tutorial to use it here. Another guy wrote the jQuery code, and the code I added is just straight forward Javascript.

Where This Slideshow Started

Jeffrey Jordan Way, a Web Developer from Nashville, TN at detacheddesigns.com, in a post called “Why Aren’t You Using jQuery: PART 3″, started this slideshow on his site as a tutorial. Check his site to learn more about the jQuery part of this code.

About that slideshow

Jeffrey’s tutorial has smaller thumbnails along the right, and the big picture on the left. You click a thumbnail and the big picture changes to the big version of that thumbnail. He used jQuery to apply the click event to the thumbnail and to display the preload progress wheel and to display the fade in effect between large images.

What’s special about my version?

Well first I took off the thumbnails. I just wanted the big image. Then I added a few features. Inside the Javascript file you put your list of images into an array. That array gets shuffled each time the page loads so the pictures don’t always display in the same order. This shuffling function was written by Jonas Raoni Soares Silva at http://jsfromhell.com/array/shuffle. You can set a flag in the file to turn off shuffling if you like.

Another way you can mix up the array is by having each next picture be random. Problem with this was that photos tend to repeat themselves. If you’re ok with that, then there is a flag to toggle the randomness like there is a flag to toggle the shuffling.

Another feature is that you can control how fast the pictures change. The default is five seconds between images.

How to get my version

Download the ZIP file from the show notes. Extract it and look in the “js” folder. In there you’ll see the Javascript that uses the jQuery library. You’ll have to edit this file to point to your images. Right now it points to my example images. Just below that are the variables controlling shuffling, randomness, and seconds between photos. Play around until you’re happy with the results.

// change these paths for your images
var myImages = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];

// shuffle images so each time page loads, the photos show in different order
var do_shuffle = true;

// use simple randomness instead of shuffling (tends to repeat images too often)
var do_randomly = false;

// number of seconds between photo changes
var seconds_between_photos = 5;

You’ll also want to change the image dimensions in the CSS file. Right now it’s set to the size of my images. Your pictures will probably be a different size. Hopefully your pictures have been optimized in Photoshop for the fastest loading, and sized to however you want them to be on your site. If you leave the CSS the way it is and your photos are a different size, the photos will be force-fit into the photo box disproportionately. All the photos have to be the same size or the CSS will stretch them to fit.

Javascript library best practices

The main issue is: will the library work for most people. If I try it out and it mostly works everywhere, I use it. I’ll test against current versions of Internet Explorer, Firefox, and Safari. I am betting that people are keeping their browsers up to date for security reasons, so I don’t support old versions.

I tend to keep a copy of the library with each project. I don’t use a single library for my whole site. If I find that a new browser breaks an old library, that’s when I try using the newer library on the old project to see if that fixes it. I don’t expect old projects to work with new libraries, at least not without testing.

My biggest fear is that a new version of Internet Explorer will break things. Experienced style sheet developers know all kinds of hacks that try to keep IE in check. Anyway, such is the dangers of client side web development. We’re at the mercy of new browsers coming out. That’s why a lot of people like server side development. You’re only building to one target – your server.

Tags: code, javascript, jquery, photoviewer, pictures, samples, slideshow, tutorial

This entry was posted on Saturday, June 7th, 2008 at 8:55 am and is filed under learning, programming, project, projects. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.