Javascript Image slideShow


//set div to display in the middle of the screen even it's scrolled

div.style.top = window.pageYOffset + (screen.height/2) - (parseInt(div.style.height)/2) + "px";
----------------------------------------
function windowHeight() {
var de = document.documentElement;
return self.innerHeight || ( de && de.clientHeight ) || document.body.clientHeight;
}
function windowWidth() {
var de = document.documentElement;
return self.innerWidth || ( de && de.clientWidth ) || document.body.clientWidth;
}

function getWidth( elem ) {
return parseInt( getStyle( elem, 'width' ) );
}

function getHeight( elem ) {
return parseInt( getStyle( elem, 'height' ) );
}

function pageHeight() {
return document.body.scrollHeight;
}

function pageWidth() {
return document.body.scrollWidth;
}

function scrollX() {
var de = document.documentElement;
return self.pageXOffset || ( de && de.scrollLeft ) || document.body.scrollLeft;
}

function scrollY() {
var de = document.documentElement;
return self.pageYOffset || ( de && de.scrollTop ) || document.body.scrollTop;
}

function setX(elem, pos) {
elem.style.left = pos + "px";
}

function setY(elem, pos) {
elem.style.top = pos + "px";
}

function addX(elem,pos) {
setX( posX(elem) + pos );
}

function addY(elem,pos) {
setY( posY(elem) + pos );
}

function hide( elem ) {
var curDisplay = getStyle( elem, 'display' );
if ( curDisplay != 'none' )
elem.$oldDisplay = curDisplay;
elem.style.display = 'none';
}

function show( elem ) {
elem.style.display = elem.$oldDisplay || '';
}

function hideOverlay() {
curImage = null;
hide( document.getElementById("overlay") );
hide( document.getElementById("gallery") );
}

function showOverlay() {
var over = document.getElementById("overlay");
over.style.height = pageHeight() + "px";
over.style.width = pageWidth() + "px";
fadeIn( over, 50, 10 );
}
//--------------------------------------------------------------
function showImage(cur) {
curImage = cur;
var img = document.getElementById("gallery_image");
if ( img.firstChild )
img.removeChild( img.firstChild );
img.appendChild( cur.firstChild.cloneNode( true ) );
//id("gallery_title").innerHTML = cur.firstChild.firstChild.alt;
var gallery = document.getElementById("gallery");
gallery.className = cur.className;
fadeIn( gallery, 100, 10 );
adjust();
}
function adjust(){
var obj = document.getElementById("gallery");
if ( !obj ) return;
var w = getWidth( obj );
var h = getHeight( obj );
var t = scrollY() + ( windowHeight() / 2 ) - ( h / 2 );
if ( t < 0 ) t = 0;
var l = scrollX() + ( windowWidth() / 2 ) - ( w / 2 );
if ( l < 0 ) l = 0;
setY( obj, t );
setX( obj, l );
};

function prevImage() {
showImage( prev( curImage ) );
return false;
}

function nextImage() {
showImage( next( curImage ) );
return false;
}

function startShow(obj) {
var elem = obj.getElementsByTagName('li');
var gallery = document.getElementById("gallery");
for ( var i = 0; i < elem.length; i++ ) new function() {
var cur = elem[i];
setTimeout(function(){
showImage( cur );
setTimeout(function(){
fadeOut( gallery, 0, 10 );
}, 3500 );
}, i * 5000 );
};
setTimeout( hideOverlay, 5000 * elem.length );
showOverlay();
}