JS Slideshow for Product Pages


I have been playing with jQuery, and I figured out how to create a slideshow using just JavaScript and images hosted on a third-party server. No Flash is required! Each image fades out while the next image fades in, and you can cycle through the images or display them at random. Best of all, it works on all modern browsers (IE, Firefox, Chrome and Opera).

*** NOTE ***
I've just created a code generator for my slideshows. If you want to use it, check out the following page:
*** NOTE ***

How to use it:

In your product page 'Edit Settings', insert the following HTML code:

(It's in the code section)

Now you are going to have to edit the options for your own pictures.

You probably don't need to edit the value for boxWidth, this is 910 by default, the width of the IFRAME where your product description is displayed.

You WILL want to change the imageHeight and ImageWidth values so they correspond to your image. You can also use this to shrink your images if you like, but if you don't keep the same aspect ratio, your images will look distorted.

The value for "path" is the base URL to your images, minus the specific file name. If you have an account in Photobucket or somewhere else, you should use that. The trailing slash (/) is optional, the script will put it there if required.

The important one is "files". This is enclosed in square braces [] and is a comma-delimited list of file names, and each file name is enclosed in single quotes. The script combines the "path" value with each of the "files" values to come up with the full URL of the images to display.

You can change the backgroundColor, too, so it matches the rest of your product page. You can use named colors like 'black' or 'aliceblue', or RGB values like '#990066'. Make sure to include the pound sign (#) for RGB values.

There are two delays, swapDelay and fadeDelay, that are in milliseconds. The swapDelay determines how long to wait before changing images. The fadeDelay determines how long the fading animation will last. You can play with these numbers until you get an effect you like.

Finally, there are two possible values for 'method', those are 'cycle' and 'random'. Cycle will start at the first image and cycle through the files in sequence, and loop back to the beginning. Random will pick the images at random, except it won't show the same image twice in a row.

I plan on adding new features to the script. I'm hosting it on www.triggerless.com, but if you would rather host it on your own server, feel free to download it and use it.


Update(1/20/2010): I've added support for a new option called 'onSwap' for JavaScript gurus. If you don't understand what an 'event' is, you probably should skip over this. Now my script will fire an event called onSwap, and you can add a callback function to execute every time the images swap. The syntax is like this:

var o_options = {
// all the other options
onSwap: function() { /* your code goes here */ }

This code snippet was originally contributed by Cheri Imvu. Go to the author' imvu website.