Slideshow

[uniopp]

Hello,
I'm using the following code to run 4 instances of a slideshow on my html page. The code was originally written for one instance but I modified it so I could run 4 seperate slideshows on the one page. My javascript knowledge is very limited so I may have made a mistake somewhere because the slides do not rotate and I'm getting the following error message using Internet Explorer 6 -
Line: 948
Char: 1
Error: 'document.images.PictureBox1.filters.blendTrans1' is null or not an object
Code: 0
URL:

http://www.mydomain.com

When I use Firefox 1.5 the slides rotate and there is no error message.
Does anyone have any idea what is causing the problems with IE?
Thank you.

<!-- Slideshow --> 
<script language="JavaScript">
// Set the slideshow speed (in milliseconds)
var SlideShowSpeed1 = 6000;
var SlideShowSpeed2 = 6000;
var SlideShowSpeed3 = 6000;
var SlideShowSpeed4 = 6000;
//

// Set the duration of crossfade (in seconds)
var CrossFadeDuration1 = 3;
var CrossFadeDuration2 = 3;
var CrossFadeDuration3 = 3;
var CrossFadeDuration4 = 3;
//

var Picture1 = new Array(); 
var Picture2 = new Array();
var Picture3 = new Array(); 
var Picture4 = new Array(); 
//

var Caption1 = new Array();
var Caption2 = new Array();
var Caption3 = new Array();
var Caption4 = new Array();
//

Picture1[1] = '[URL unfurl="true"]http://www.mydomain.com/images/pic1.jpg';[/URL]
Picture1[2] = '[URL unfurl="true"]http://www.mydomain.com/images/pic2.jpg';[/URL]
Picture1[3] = '[URL unfurl="true"]http://www.mydomain.com/images/pic3.jpg';[/URL]
Picture1[4] = '[URL unfurl="true"]http://www.mydomain.com/images/pic4.jpg';[/URL]
Picture1[5] = '[URL unfurl="true"]http://www.mydomain.com/images/pic5.jpg';[/URL]
Picture1[6] = '[URL unfurl="true"]http://www.mydomain.com/images/pic6.jpg';[/URL]

Picture2[1] = '[URL unfurl="true"]http://www.mydomain.com/images/pic7.jpg';[/URL]
Picture2[2] = '[URL unfurl="true"]http://www.mydomain.com/images/pic8.jpg';[/URL]
Picture2[3] = '[URL unfurl="true"]http://www.mydomain.com/images/pic9.jpg';[/URL]
Picture2[4] = '[URL unfurl="true"]http://www.mydomain.com/images/pic10.jpg';[/URL]
Picture2[5] = '[URL unfurl="true"]http://www.mydomain.com/images/pic11.jpg';[/URL]
Picture2[6] = '[URL unfurl="true"]http://www.mydomain.com/images/pic12.jpg';[/URL]

Picture3[1] = '[URL unfurl="true"]http://www.mydomain.com/images/pic13.jpg';[/URL]
Picture3[2] = '[URL unfurl="true"]http://www.mydomain.com/images/pic14.jpg';[/URL]
Picture3[3] = '[URL unfurl="true"]http://www.mydomain.com/images/pic15.jpg';[/URL]
Picture3[4] = '[URL unfurl="true"]http://www.mydomain.com/images/pic16.jpg';[/URL]
Picture3[5] = '[URL unfurl="true"]http://www.mydomain.com/images/pic17.jpg';[/URL]
Picture3[6] = '[URL unfurl="true"]http://www.mydomain.com/images/pic18.jpg';[/URL]

Picture4[1] = '[URL unfurl="true"]http://www.mydomain.com/images/pic19.jpg';[/URL]
Picture4[2] = '[URL unfurl="true"]http://www.mydomain.com/images/pic20.jpg';[/URL]
Picture4[3] = '[URL unfurl="true"]http://www.mydomain.com/images/pic21.jpg';[/URL]
Picture4[4] = '[URL unfurl="true"]http://www.mydomain.com/images/pic22.jpg';[/URL]
Picture4[5] = '[URL unfurl="true"]http://www.mydomain.com/images/pic23.jpg';[/URL]
Picture4[6] = '[URL unfurl="true"]http://www.mydomain.com/images/pic24.jpg';[/URL]


Caption1[1] = 'Text1';
Caption1[2] = 'Text2';
Caption1[3] = 'Text3';
Caption1[4] = 'Text4';
Caption1[5] = 'Text5';
Caption1[6] = 'Text6';

Caption2[1] = 'Text7';
Caption2[2] = 'Text8';
Caption2[3] = 'Text9';
Caption2[4] = 'Text10';
Caption2[5] = 'Text11';
Caption2[6] = 'Text12';

Caption3[1] = 'Text13';
Caption3[2] = 'Text14';
Caption3[3] = 'Text15';
Caption3[4] = 'Text16';
Caption3[5] = 'Text17';
Caption3[6] = 'Text18';

Caption4[1] = 'Text19';
Caption4[2] = 'Text20';
Caption4[3] = 'Text21';
Caption4[4] = 'Text22';
Caption4[5] = 'Text23';
Caption4[6] = 'Text24';



var tss1;
var tss2;
var tss3;
var tss4;
//

var iss1;
var iss2;
var iss3;
var iss4;
//
var jss1 = 1;
var jss2 = 1;
var jss3 = 1;
var jss4 = 1;
//

var pss1 = Picture1.length-1;
var pss2 = Picture2.length-1;
var pss3 = Picture3.length-1;
var pss4 = Picture4.length-1;
//

var preLoad1 = new Array();
var preLoad2 = new Array();
var preLoad3 = new Array();
var preLoad4 = new Array();
//

for (iss1 = 1; iss1 < pss1+1; iss1++){
preLoad1[iss1] = new Image();
preLoad1[iss1].src = Picture1[iss1];}

for (iss2 = 1; iss2 < pss2+1; iss2++){
preLoad2[iss2] = new Image();
preLoad2[iss2].src = Picture2[iss2];}

for (iss3 = 1; iss3 < pss3+1; iss3++){
preLoad3[iss3] = new Image();
preLoad3[iss3].src = Picture3[iss3];}

for (iss4 = 1; iss4 < pss4+1; iss4++){
preLoad4[iss4] = new Image();
preLoad4[iss4].src = Picture4[iss4];}


 


function runSlideShow1(){
if (document.all){
document.images.PictureBox1.style.filter="blendTrans1(duration=2)";
document.images.PictureBox1.style.filter="blendTrans1(duration=CrossFadeDuration1)";
document.images.PictureBox1.filters.blendTrans1.Apply();}
document.images.PictureBox1.src = preLoad1[jss1].src;
if (document.getElementById) document.getElementById("CaptionBox1").innerHTML= Caption1[jss1];
if (document.all) document.images.PictureBox1.filters.blendTrans1.Play();
jss1 = jss1 + 1;
if (jss1 > (pss1)) jss1=1;
tss1 = setTimeout('runSlideShow1()', SlideShowSpeed1);
}

function runSlideShow2(){
if (document.all){
document.images.PictureBox2.style.filter="blendTrans2(duration=2)";
document.images.PictureBox2.style.filter="blendTrans2(duration=CrossFadeDuration2)";
document.images.PictureBox2.filters.blendTrans2.Apply();}
document.images.PictureBox2.src = preLoad2[jss2].src;
if (document.getElementById) document.getElementById("CaptionBox2").innerHTML= Caption2[jss2];
if (document.all) document.images.PictureBox2.filters.blendTrans2.Play();
jss2 = jss2 + 1;
if (jss2 > (pss2)) jss2=1;
tss2 = setTimeout('runSlideShow2()', SlideShowSpeed2);
}

function runSlideShow3(){
if (document.all){
document.images.PictureBox3.style.filter="blendTrans3(duration=2)";
document.images.PictureBox3.style.filter="blendTrans3(duration=CrossFadeDuration3)";
document.images.PictureBox3.filters.blendTrans3.Apply();}
document.images.PictureBox3.src = preLoad3[jss3].src;
if (document.getElementById) document.getElementById("CaptionBox3").innerHTML= Caption3[jss3];
if (document.all) document.images.PictureBox3.filters.blendTrans3.Play();
jss3 = jss3 + 1;
if (jss3 > (pss3)) jss3=1;
tss3 = setTimeout('runSlideShow3()', SlideShowSpeed3);
}

function runSlideShow4(){
if (document.all){
document.images.PictureBox4.style.filter="blendTrans4(duration=4)";
document.images.PictureBox4.style.filter="blendTrans4(duration=CrossFadeDuration4)";
document.images.PictureBox4.filters.blendTrans4.Apply();}
document.images.PictureBox4.src = preLoad4[jss4].src;
if (document.getElementById) document.getElementById("CaptionBox4").innerHTML= Caption4[jss4];
if (document.all) document.images.PictureBox4.filters.blendTrans4.Play();
jss4 = jss4 + 1;
if (jss4 > (pss4)) jss4=1;
tss4 = setTimeout('runSlideShow4()', SlideShowSpeed4);
}
</script>
<!--END Slideshow -->

 

[BillyRayPreachersSon]

What are "blendTrans1", "blendTrans2", "blendTrans3", and "blendTrans4"? I think you need to use simply "blendTrans".

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[uniopp]

Thank you!!!
That did the trick.
There is now no error in IE and the blend transition is working (e.g the pictures blend into eachother on rotation).
I didn't even know that there was blending. In Firefox the blending does not work, the pictures just rotate with no blending (which I thought was normal). Obviously Firefox doesn't support the blending feature and therefor was not generating an error. At least both browsers now rotate the pictures which is what I wanted. I guess I should try some other browsers as well.
Thanks again.