right, i have a java script slideshow which works fine, but i need 4 of them displayed together, forming a grid.

 

I have tried giving each instance a unique id, but that hasn't worked. I have also tried having a universal class, but then the slideshow doesn't work.

 

JAVASCRIPT

 

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false,interval=3000;

function so_init() {
if(!d.getElementById || !d.createElement)return;

/*css = d.createElement("link");
css.setAttribute("href","js/xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);*/

imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;

setTimeout(so_xfade,interval);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05; 
nOpacity+=.05;

imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]); 
setOpacity(imgs[nIndex]);

if(cOpacity<=0) {
	imgs[current].style.display = "none";
	current = nIndex;
	setTimeout(so_xfade,interval);
} else {
	setTimeout(so_xfade,50);
}

function setOpacity(obj) {
	if(obj.xOpacity>.99) {
		obj.xOpacity = .99;
		return;
	}
	obj.style.opacity = obj.xOpacity;
	obj.style.MozOpacity = obj.xOpacity;
	obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

}

 

HTML

 

<div id="slideshow1">
<div style="position:relative; ">
<div id="imageContainer">

<img style="display:block;opacity:1;" src="images/image1.png" alt="picture 1"/>
<img src="images/image3.png" alt="picture 2" />
<img src="images/image4.png" alt="picture 3" />
<img src="images/image2.png" alt="picture 4" />

</div>
</div>	
</div>

 

CSS

 

#imageContainer { 
height:309px; 
}  

#imageContainer img { 
display:none; 	
position:absolute; 	
top:0px; left:0px; 	
height:150px;  	
width:250px; 	
opacity: -0.01; 
}

 

thanks

have you tried duplicating the imageContainer code and then have 3 more DIVs imageContainer1 etc?

yer i have tried that, and it doesn't work.

Just use a slideshow that can handle multiple slideshows on one page, like Magic Slideshow.

yep i have a different one now and it works fine

 

thanks