Foolproof slideshow, fading in IE8 and FF3.5.5:


1. Copy the following and put in the head:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js"></script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [700, 525], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/01.jpg", "", "", "Meg in Greece."],
["images/02.jpg", "", "", "Ah, the life. Being bums in Athens."],
["images/03.jpg", "", "", "At the International Computer Science Research Conference in Athens."],
["images/04.jpg", "", "", "Meg and Carly in Vrakati."],
["images/05.jpg", "", "", "Athens is my new favorite city. Here I am with Louie."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

2. Copy the following and put in the body where you want the slideshow:

<div id="fadeshow1"></div>

3. Click on link to download this little zip file which is made up of 2 js files. Place the js files in the same folder as the index.html:

Download zip file

Note: You name the jpgs in the head data. You speed up/slow down slideshow speed in the head data as well.