/*
Set an onload event in the body tag of the document such as seen below.
***************************
***************************
Create a div tag with the ID set to 'imageMaster' and a style attribute of 'position: relative'.
The imgaes will be written inside this div tag.
***************************
***************************
Create an array named imageArray and fill the array with images like the example below.
***************************
var imageArray = new Array();
var count = 0;
imageArray[count++] = "images/image1.jpg";
imageArray[count++] = "images/image2.jpg";
imageArray[count++] = "images/image3.jpg";
***************************
Include this JS file at the bottom of your file and ythe images fade in and out.
*/
//Preload images in array
if(imageArray)
{
imageObj = new Array();
for(x = 0; x < imageArray.length; x++)
{
imageObj[x] = new Image();
imageObj[x].src = imageArray[x];
}
}
var timerCount = -1;
var mainTimer;
var rotationNumber;
rotationNumber = Math.floor(Math.random() * imageArray.length) + 1;
// subtract 1 to make it work inside array
rotationNumber = rotationNumber - 1;
//Strat counting down till next image fades in
function timerStart()
{
//Check to make sure more than one image exsist in the array if only one image just write out single image.
if(imageArray.length >= 2)
{
if(timerCount != 5)
{
mainTimer = setTimeout("timerStart()",1500);
timerCount = timerCount + 1;
if(imageArray[rotationNumber])
{ document.getElementById("imghdr").innerHTML = ""; }
else
{ rotationNumber = 0; }
}
else
{
timerCount = 0;
rotationNumber = rotationNumber + 1;
if(imageArray[rotationNumber])
{
document.getElementById("imghdr").innerHTML = document.getElementById("imghdr").innerHTML + "";
fadeImage()
}
else
{
rotationNumber = 0;
document.getElementById("imghdr").innerHTML = document.getElementById("imghdr").innerHTML + "";
fadeImage()
}
}
}
else
{ document.getElementById("imghdr").innerHTML = ""; }
}
var fadeUp = 0;
var fadeOut = 100;
var subTimer;
//Used to fade out the image showing and fade in the image next in the array.
function fadeImage()
{
if(document.getElementById("picToShowNew").style.filter)
{
if(document.getElementById("picToShowNew").style.filter != "alpha(opacity=100)")
{
document.getElementById("picToShowNew").style.filter = 'alpha(opacity=' + fadeUp + ')';
fadeUp = fadeUp + 1;
document.getElementById("picToShowCurrent").style.filter = 'alpha(opacity=' + fadeOut + ')';
fadeOut = fadeOut - 1;
subTimer = setTimeout("fadeImage()",15)
}
else
{
mainTimer = setTimeout("timerStart()",1500);
fadeUp = 0;
fadeOut = 100;
}
}
else
{
if(document.getElementById("picToShowNew").style.opacity != "1")
{
document.getElementById("picToShowNew").style.opacity = fadeUp/100;
fadeUp = fadeUp + 1;
document.getElementById("picToShowCurrent").style.opacity = fadeOut/100;
fadeOut = fadeOut - 1;
subTimer = setTimeout("fadeImage()",15)
}
else
{
mainTimer = setTimeout("timerStart()",1500);
fadeUp = 0;
fadeOut = 100;
}
}
}