PDA

View Full Version : Javascript Background Image Gallery

barkermn01
08-06-2008, 12:55 PM
function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;

//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else{
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}

function pausecomp(millis)
{
var date = new Date();
var curDate = null;

do { curDate = new Date(); }
while(curDate-date < millis);
}

function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function donull(){
}

var randN = 0;
var last;
var imagesA = new Array();

function imageChange(){
// edit below to change images and add new images just add below in same style
imagesA[1] = 'images/gallery/image1.png';
imagesA[2] = 'images/gallery/image2.png';
imagesA[3] = 'images/gallery/image3.png';
imagesA[4] = 'images/gallery/image4.png';
imagesA[5] = 'images/gallery/image5.png';
imagesA[6] = 'images/gallery/image6.png';
imagesA[7] = 'images/gallery/image7.png';
imagesA[8] = 'images/gallery/image8.png';
imagesA[9] = 'images/gallery/image9.png';
//Do not Edit below
randMax = imagesA.length-1;
randN ++;
if(randN > randMax)
{
randN = randN - randMax;
}
document.getElementById("imageR").style.backgroundImage = "url("+imagesA[randN]+")";
setTimeout("fadeIn();", 1);
}

function fadeOut(Instant){
if(Instant != true){
opacity('imageR', 100, 0, 750);
}else{
opacity('imageR', 100, 0, 1);
}
setTimeout ("imageChange();", 1250);
}

function fadeIn(){
opacity('imageR', 0, 100, 750);
setTimeout("fadeOut();", 4000);
}
have your div called imageR
Then setup you images in the ChangeImage Section

function imageChange(){
// edit below to change images and add new images just add below in same style
imagesA[1] = 'images/gallery/image1.png';
imagesA[2] = 'images/gallery/image2.png';
...

then just add to your <body onload="fadeOut(true);"

Thats it Just nice and simmple Add you images and activate

This has been tested and works on
IE7
FF2
Flock
Netscape
Opera