Help Please :) Slideshow Fade


#1

Hey guys hopefully this is the right place for the this post i have a slideshow with a few different pictures as a banner with a 5second interval using javascript, but its not complete just yet, to make it look appealing i am wanting to have the images fadein on change i have tried animate.css trick, doesn't do anything and have tried completely changing it to use a jquery method which also doesn't suit the website and just makes everything stack or completely disappear. If there is a simple CSS trick or javascript method it would be so muchly appreciated i have been trying to do this for days and its starting to drive me a little loco haha.
Thanks guys :smiley:


#2

This is how my javascript slideshow works. see http://www.jpc.wa.edu.au/ as an example

var slideShowPosition = 0; //current position in slideshow
var slideDuration = 5; //slide duration -- in seconds
var slideTransitionDuration = 1;

$(document).ready(function()
{
	ImageLoader()
	
	setInterval(function(){
		$("#SlideShow").fadeTo(slideTransitionDuration*1000, 0,function(){
			$("#SlideShow").css("background-image","url("+GetNextSlide()+")");
			$("#SlideShow").fadeTo(slideTransitionDuration*1000, 1);
		});
	},(slideDuration*1000));
});

function ImageLoader()
{
	load = [
	"images/SlideShow/slide0.jpg",
	"images/SlideShow/slide1.jpg",
	"images/SlideShow/slide21.jpg"]
	
	slideShow = new Array();
	for(i=0;i<loaderArray.length;i++)
	{
		slideShow[i] = new Image() //store directory as a new image
		slideShow[i].src = loaderArray[i];
	}
}

function GetNextSlide()
{
	slideShowPosition++;
	if(slideShowPosition >= slideShow.length)
	{
		slideShowPosition = 0;
	}
	return slideShow[slideShowPosition].src
}