PDA

View Full Version : How to combine two slideshows?

kippie
06-11-2002, 04:59 AM
I have a HTML below in which there are 2 slideshows. For this I use a function "doTrans". For the second slideshow I use "doTrans2" which is in fact the same as "doTrans". I wonder if it is possible to use only one function instead of two similar ones the more because I want to extend this to maybe 10 slideshows playing all together. The only thing is that I should be able to control all slideshows indepently from each other (choice of images, speed, time-intervals). Can anyone help?

This is the HTML:
<html>
<HEAD>

<SCRIPT>
var images = new Array();
images[0] = "aardbei.gif";
images[1] = "citroenkopie.jpg";
images[2] = "trostomaat.jpg";
images[3] = "appel.gif";
var activeImg = images[0];
var currentNum = 0;

function doTrans() {
if(currentNum < images.length){imgObj.filters[0].apply();

if (oImg.src.indexOf(activeImg)!=-1) {
oImg.src = images[currentNum];
activeImg = images[currentNum];
}

else { oImg.src = activeImg;
}

imgObj.filters[0].play();
currentNum++;} else currentNum = 0;
setTimeout("doTrans(" + currentNum + ")", 8000);
}
</SCRIPT>


<SCRIPT>
var images2 = new Array();
images2[0] = "druiven.jpg";
images2[1] = "kreeft.jpg";
images2[2] = "visstaart.jpg";
images2[3] = "pepper.jpg";
var activeImg2 = images2[0];
var currentNum2 = 0;

function doTrans2() {
if(currentNum2 < images2.length){imgObj2.filters[0].apply();

if (oImg2.src.indexOf(activeImg2)!=-1) {
oImg2.src = images2[currentNum2];
activeImg2 = images2[currentNum2];
}

else { oImg2.src = activeImg2;
}

imgObj2.filters[0].play();
currentNum2++;} else currentNum2 = 0;
setTimeout("doTrans2(" + currentNum2 + ")", 8000);
}
</SCRIPT>
</HEAD>
<BODY>
<SPAN id="imgObj" style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); WIDTH: 200px; HEIGHT: 100px; BACKGROUND-COLOR: white">
<IMG id="oImg" style="MARGIN: 8px" src="peer.jpg" align="left">
</SPAN>
<SPAN id="imgObj2" style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); WIDTH: 200px; HEIGHT: 100px; BACKGROUND-COLOR: white">
<IMG id="oImg2" style="MARGIN: 8px" src="broccoli.jpg" align="left">
</SPAN>
<script language="JavaScript"><!--
setTimeout("doTrans('1')",6000)
setTimeout("doTrans2('1')",2000)

// -->
</script>
</BODY>
</html>

Kippie
Jon Hanlon
06-11-2002, 07:07 PM
If you're going to run 10 slideshows you're better off using Flash or animated gif files.
Otherwise, pass your global variables into the function:
function doTrans(imageArray,SpanID,currentNum)

The only problem is that setTimeout only accepts string parameters, not object references. You either have to put in a big if or switch statement, or use eval, to turn the strings into object references.