jQuery fading div background-image

I thought I’d share my pain with you, as a problem shared is a problem halved.

Two months ago I was asked to create a website with a fading slideshow of images in the background of the main content. Simple enough I thought, I’m sure there’s plenty of pre-written scripts for me to choose from. WRONG!

For hours & hours I trawled Google and endless forums dating back to 2006 when Javascript was a minimum of 1,239,800 lines just to perform a simple image swap. My luck was out, I thought. And in hindsight, I probably could have made something myself in the time it had taken me!

I had pretty much settled on a PHP refresh-the-page-get-a-new-image script when I came across this beauty purely by accident. Last updated in March 2010, this script is probably as good as I was going to find! “Ultimate Fade-in Slideshow”

1. Link to your jQuery library. Personally I always use the Google link:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

2. Download fadeslideshow.js and link it in your head

<script src="http://www.yourURL.co.uk/fadeslideshow.js"></script>

3. Add the following to your head section and change the bits you need to, for example, the dimensions, the ID name of the element you’re applying the effect to, image URLs and other details referring to fade times and changes

<script type="text/javascript"> 

var mygallery=new fadeSlideShow({
	wrapperid: "main", //ID of blank DIV on page to house Slideshow
	dimensions: [1000, 452], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.yourURL.co.uk/images/main-bg.jpg", "", "", ""],
		["http://www.yourURL.co.uk/images/main-bg2.jpg", "", "", ""],
		["http://www.yourURL.co.uk/images/main-bg3.jpg", "", "", ""],
		["http://www.yourURL.co.uk/images/main-bg4.jpg", "", "", ""],
		["http://www.yourURL.co.uk/images/main-bg5.jpg", "", "", ""],
		["http://www.yourURL.co.uk/images/main-bg6.jpg", "", "", ""],
		["http://www.yourURL.co.uk/images/main-bg7.jpg", "", "", ""],
		["http://www.yourURL.co.uk/images/main-bg8.jpg", "", "", ""],
		["http://www.yourURL.co.uk/images/main-bg9.jpg", "", "", ""]
	],
	displaymode: {type:'auto', pause:8000, cycles:0, wraparound:false},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
</script>

It’s important to know that I had some trouble with layering elements over the top (absolutely positioned) of the slideshow div. If you’re having similar issues, try applying a “z-index-1;” value to the slideshow div, like so:

#main{
width:1000px;
height:452px;
z-index:-1;
}

Websites I’ve built currently using this method
www.dakarrallyteam.co.uk
www.adventureardeche.com