Slideshow positioning problem
- by James
I have a javascript slideshow that works perfectly on Windows 7, Firefox, Chrome, IE 8+ (I don't have the resources to check 6 or 7) and Opera. But I've been told that when on xp with IE 7 the slidshow gets thrown off screen to the right. What could my issue be?
Here is my css:
#page {
width:940px;
margin: auto;
}
gallery {
position:relative;
padding:0px;
margin:5px 0px;
width:940px;
height:320px;
}
gallery li {
display: block;
width:940px;
height:320
list-style:none;
}
And here is my javascript:
var galleryId = 'gallery';
var gallery;
var galleryImages;
var currentImage;
var previousImage;
var preInitTimer;
preInit();
function preInit() {
if ((document.getElementById)&&(gallery=document.getElementById(galleryId))) {
gallery.style.visibility = "hidden";
if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer);
} else {
preInitTimer = setTimeout("preInit()",2);
}
}
function fader(imageNumber,opacity) {
var obj=galleryImages[imageNumber];
if (obj.style) {
if (obj.style.MozOpacity!=null) {
obj.style.MozOpacity = (opacity/100) - .001;
} else if (obj.style.opacity!=null) {
obj.style.opacity = (opacity/100) - .001;
} else if (obj.style.filter!=null) {
obj.style.filter = "alpha(opacity="+opacity+")";
}
}
}
function fadeInit() {
if (document.getElementById) {
preInit();
galleryImages = new Array;
var node = gallery.firstChild;
while (node) {
if (node.nodeType==1) {
galleryImages.push(node);
}
node = node.nextSibling;
}
for(i=0;i
galleryImages[i].style.position='absolute';
galleryImages[i].style.top=0;
galleryImages[i].style.zIndex=0;
fader(i,0);
}
gallery.style.visibility = 'visible';
currentImage=0;
previousImage=galleryImages.length-1;
opacity=100;
fader(currentImage,100);
window.setTimeout("crossfade(100)", 1000);
}
}
function crossfade(opacity) {
if (opacity < 100) {
fader(currentImage,opacity);
opacity += 9;
window.setTimeout("crossfade("+opacity+")", 50);
} else {
fader(previousImage,0);
previousImage=currentImage;
currentImage+=1;
if (currentImage=galleryImages.length) {
currentImage=0;
}
galleryImages[previousImage].style.zIndex = 0;
galleryImages[currentImage].style.zIndex = 100;
opacity=0;
window.setTimeout("crossfade("+opacity+")", 5000);
}
}
addEvent(window,'load',fadeInit)
function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
}
}
And ideas?
