3 keer hetzelfde javascript plaatsen (-> problemen) - Softwareontwikkeling

zondag 24 oktober 2004 15:35

Acties:

Topicstarter

Hi!

Bij het maken van een pagina wil ik gebruik maken van een scriptje voor het faden tussen verschillende plaatjes.

Dit werkt prima als ik 1 zo´n effect op m´n pagina wil. Wanneer ik er 2 plaats krijg ik problemen (op zich logisch want ze gaan dan allebei gebruik maken van hetzelfde script wat voor problemen zorgt)
Ik wil dus 1 image effect met plaatjes x1 x2 x3 en 1 image effect met plaatjes y1 y2 en y3.

Het probleem zit hem lijkt me in het feit dat ze beiden "linken" naar dezelfde functies.
Mijn javascript kennis is minimaal, kan iemand mij vertellen of het mogelijk is wat ik wil en zoja hoe ik dit op zou moeten lossen?

Head:

code:

<script> 


var SlideShowSpeed = 3000; 

var CrossFadeDuration = 3; 

var Picture = new Array(); 
var Caption = new Array(); 

Picture[1]  = '01.jpg'; 
Picture[2]  = '02.jpg'; 
Picture[3]  = '03.jpg'; 
Picture[4]  = '04.jpg'; 

Caption[1]  = "Dit is het eerste plaatje."; 
Caption[2]  = "En dit is de tweede."; 
Caption[3]  = "Hier dan het derde plaatje."; 
Caption[4]  = "en vooralsnog de laatste.. de vierde."; 

var tss; 
var iss; 
var jss = 1; 
var pss = Picture.length-1; 

var preLoad = new Array(); 
for (iss = 1; iss < pss+1; iss++){ 
preLoad[iss] = new Image(); 
preLoad[iss].src = Picture[iss];} 

function runSlideShow(){ 
if (document.all){ 
document.images.PictureBox.style.filter="blendTrans(duration=2)"; 
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)"; 
document.images.PictureBox.filters.blendTrans.Apply();} 
document.images.PictureBox.src = preLoad[jss].src; 
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss]; 
if (document.all) document.images.PictureBox.filters.blendTrans.Play(); 
jss = jss + 1; 
if (jss > (pss)) jss=1; 
tss = setTimeout('runSlideShow()', SlideShowSpeed); 
} 

</script>

Body:

code:

<body onload=runSlideShow()> 

<table border=0 cellpadding=0 cellspacing=0> 
  <tr> 
    <td width=350 height=280> 
    [img]01.jpg[/img] 
    </td> 
  </tr> 
  <tr> 
    <td id=CaptionBox class=Caption align=center bgcolor=#404040> 
    Dit is de standaard tekst. 
    </td> 
  </tr> 
</table> 

  </center> 
</div>

Denk dat er ook iets moeten veranderen in de

code:

1	<body onload=runSlideShow()>

iets als

code:

1	<body onload="runSlideShow1(); runSlideShow2()">

maar welke waarden moeten nog meer veranderd worden als ik dit doe

Ik ben een beetje de weg kwijt! Hoop dat iemand mij hiermee kan helpen!

Avb

[ Voor 16% gewijzigd door onne op 24-10-2004 15:36 ]

zondag 24 oktober 2004 15:58

Acties:

Janoz

Moderator Devschuur®

!litemod

Je bent zeker de weg kwijt

. Javascipt hoor niet in Programming & Webscripting, vandaar dat ik 'm even over de schutting gooi.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

zondag 24 oktober 2004 17:15

Acties:

André

Analytics dude

code:

<html>
  <head>
    <title>Test</title>
    <style>
    </style>
    <script type="text/javascript"> 
      Picture = new Array(); 

      Picture[0] = new Array(); 
      Picture[0].actief = 1;
      Picture[0].SlideShowSpeed = 5000;
      Picture[0].CrossFadeDuration = 1;
      Picture[0][0] = ["01.jpg", "Dit is het eerste plaatje."]; 
      Picture[0][1] = ["02.jpg", "En dit is de tweede."]; 
      Picture[0][2] = ["03.jpg", "Hier dan het derde plaatje."]; 
      Picture[0][3] = ["04.jpg", "en vooralsnog de laatste.. de vierde."]; 

      Picture[1] = new Array(); 
      Picture[1].actief = 1;
      Picture[1].SlideShowSpeed = 3000;
      Picture[1].CrossFadeDuration = 3;
      Picture[1][0] = ["03.jpg", "Test 1"]; 
      Picture[1][1] = ["04.jpg", "Test 2"]; 
      Picture[1][2] = ["01.jpg", "Test 3"]; 
      Picture[1][3] = ["02.jpg", "Test 4"]; 

      preLoad = new Array();
      
      for (var i = 0; i < Picture.length; i++)
      {
        preLoad[i] = new Array(); 
        for (var j = 0; j < Picture[i].length; j++)
        {
          preLoad[i][j] = new Image(); 
          preLoad[i][j].src = Picture[i][j][0];
        }
      } 
      function runSlideShow(i)
      { 
        document.getElementById("PictureBox" + i).style.filter = "blendTrans(duration=" + Picture[i].CrossFadeDuration + ")"; 
        document.getElementById("PictureBox" + i).filters.blendTrans.Apply();
        document.getElementById("PictureBox" + i).src = preLoad[i][Picture[i].actief].src; 
        document.getElementById("CaptionBox" + i).innerHTML = Picture[i][Picture[i].actief][1]; 
        document.getElementById("PictureBox" + i).filters.blendTrans.Play(); 

        Picture[i].actief++
        if (Picture[i].actief + 1 > Picture[i].length) { Picture[i].actief = 0; }
        setTimeout("runSlideShow(" + i + ")", Picture[i].SlideShowSpeed); 
      } 

      function startShow()
      {
        for (var i=0; i < Picture.length; i++)
        {
          runSlideShow(i)
        }
      }
    </script>
  </head>
  <body onload="startShow()">

    <table border="0" cellpadding="0" cellspacing="20"> 
      <tr> 
        <td width="350" height="280"> 
          [img]"01.jpg"[/img] 
        </td> 
        <td width="350" height="280"> 
          [img]"03.jpg"[/img] 
        </td> 
      </tr> 
      <tr> 
        <td id="CaptionBox0" class="Caption" align="center" bgcolor="#404040"> 
          Dit is de standaard tekst. 
        </td> 
        <td id="CaptionBox1" class="Caption" align="center" bgcolor="#404040"> 
          Dit is de standaard tekst. 
        </td> 
      </tr> 
    </table> 

  </body>
</html>

Op deze manier kun je honderden animaties op je pagina kwijt