• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 341
  • Last Modified:

Multiple javascript slideshows - need help defining different slideshow lengths

The code below works only when all slide shows are the same length ie they contain the same amount of pictures.  A blank image appaears in the slideshow with three images since the other slide show before it has four images.  I need a code that will make it possible to run these slideshows with different numbers of image snad will not show blank spots.  Can anyone help.  This is the code.  Thanks

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

NewImg1 = new Array (
"images/callisto.jpg",
"images/io.jpg",
"images/ganymede.jpg",
"images/europa.jpg"
);

NewImg2 = new Array (
"images/io.jpg",
"images/callisto.jpg",
"images/ganymede.jpg"
);

NewImg3 = new Array (
"images/ganymede.jpg",
"images/callisto.jpg",
"images/io.jpg",
"images/ganymede.jpg",
"images/callisto.jpg",
"images/io.jpg",
"images/europa.jpg"
);





var ImgNum = 0;
var ImgLength = NewImg1.length - 1




//Time delay between Slides in milliseconds
var delay = 3000;

var lock1 = false;
var lock2 = false;
var lock3 = false;
var run1;
var run2;
var run3;





function chgImg(show,direction) {
  if (document.images) {
   ImgNum = ImgNum + direction;
   if (ImgNum > ImgLength) { ImgNum = 0; }
   if (ImgNum < 0) {ImgNum = ImgLength;  }
   if (show == 'show1' ){ document.slideshow1.src = NewImg1[ImgNum]; }
   if (show == 'show2' ){ document.slideshow2.src = NewImg2[ImgNum]; }
   if (show == 'show3' ){ document.slideshow3.src = NewImg3[ImgNum]; }
  }
}


function auto(show) {
if ( show == 'show1' ){
  if (lock1 == true) {
    lock1 = false;
    window.clearInterval(run1);
  } else if (lock1 == false) {
      lock1 = true;
      run1 = setInterval("chgImg('show1',1)", delay);
  }
}
if ( show == 'show2' ){
  if (lock2 == true) {
    lock2 = false;
    window.clearInterval(run2);
  } else if (lock2 == false) {
      lock2 = true;
      run2 = setInterval("chgImg('show2',1)", delay);
  }

}
if ( show == 'show3' ){
  if (lock3 == true) {
    lock3 = false;
    window.clearInterval(run3);
  } else if (lock2 == false) {
      lock3 = true;
      run3 = setInterval("chgImg('show3',1)", delay);
  }
}

}

//  End -->
</script>

</HEAD>


<BODY>
<center>
<img src="images/callisto.jpg" name="slideshow1" width="262" height="262">
<table>
<tr>
<td align="right"><a href="javascript:chgImg('show1',-1)">Previous</a></td>
<td align="center"><a href="javascript:auto('show1')">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg('show1',1)">Next</a></td>
</tr>
</table>
</center>

<center>
<img src="images/io.jpg" name="slideshow2" width="262" height="261">
<table>
<tr>
<td align="right"><a href="javascript:chgImg('show2',-1)">Previous</a></td>
<td align="center"><a href="javascript:auto('show2')">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg('show2',1)">Next</a></td>
</tr>
</table>
</center>

<center>
<img src="images/ganymede.jpg" name="slideshow3" width="262" height="261">
<table>
<tr>
<td align="right"><a href="javascript:chgImg('show3',-1)">Previous</a></td>
<td align="center"><a href="javascript:auto('show3')">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg('show3',1)">Next</a></td>
</tr>
</table>
</center>





</BODY>
</HTML>
0
dialektkid
Asked:
dialektkid
  • 2
  • 2
1 Solution
 
BustaroomsCommented:
without changing your code too much you can add this

var theLength=(show == 'show1') ? NewImg1.length -1 : (show == 'show2') ? NewImg2.length - 1 : NewImg3.length-1;


in your chgImg function before the if(document.images)
0
 
BustaroomsCommented:
oh and you need to change something else....here the new chgImg function

function chgImg(show,direction) {
var theLength=(show == 'show1') ? NewImg1.length -1 : (show == 'show2') ? NewImg2.length - 1 : NewImg3.length-1;
 if (document.images) {
  ImgNum = ImgNum + direction;
  if (ImgNum > theLength) { ImgNum = 0; }
  if (ImgNum < 0) {ImgNum = theLength;  }
  if (show == 'show1' ){ document.slideshow1.src = NewImg1[ImgNum]; }
  if (show == 'show2' ){ document.slideshow2.src = NewImg2[ImgNum]; }
  if (show == 'show3' ){ document.slideshow3.src = NewImg3[ImgNum]; }
 }
}
0
 
apprentiCommented:
var ImgLength = NewImg1.length - 1

This variable is being used as the length for all the slideshows.
0
 
apprentiCommented:
Sometimes it can be worth doing a little cut and paste, and making separate functions with different variable names in each. If each slideshow is controlled by a separate function, there's less chance of this sort of problem arising.
0
 
bhatiashardeepCommented:
Check out with some changes in your code only
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

NewImg1 = new Array (
"temp_files/1.jpg",
"temp_files/2.jpg",
"temp_files/3.jpg",
"temp_files/4.jpg"
);

NewImg2 = new Array (
"temp_files/1.jpg",
"temp_files/2.jpg",
"temp_files/3.jpg"
);

NewImg3 = new Array (
"temp_files/1.jpg",
"temp_files/3.jpg",
"temp_files/2.jpg",
"temp_files/4.jpg",
"temp_files/1.jpg",
"temp_files/2.jpg",
"temp_files/3.jpg"
);





var ImgNum1 = 0;
var ImgNum2 = 0;
var ImgNum3 = 0;
var ImgLength = NewImg1.length - 1




//Time delay between Slides in milliseconds
var delay = 1000;

var lock1 = false;
var lock2 = false;
var lock3 = false;
var run1;
var run2;
var run3;





function chgImg(show,direction) {
 
  if (document.images) {
   if (show == 'show1' ){
   document.slideshow1.src = NewImg1[ImgNum1];
   if(ImgNum1==NewImg1.length-1)
            ImgNum1=0
      else
            ImgNum1++;            
    }
   if (show == 'show2' ){
   document.slideshow2.src = NewImg2[ImgNum2];
   if(ImgNum2==NewImg2.length-1)
            ImgNum2=0
      else
            ImgNum2++;
   }
   if (show == 'show3' ){
   document.slideshow3.src = NewImg3[ImgNum3];
      if(ImgNum3==NewImg3.length-1)
            ImgNum3=0
      else
            ImgNum3++;
   }
  }
}


function auto(show) {
if ( show == 'show1' ){
  if (lock1 == true) {
    lock1 = false;
    window.clearInterval(run1);
  } else if (lock1 == false) {
      lock1 = true;
      run1 = setInterval("chgImg('show1',1)", delay);
     
  }
}
if ( show == 'show2' ){
  if (lock2 == true) {
    lock2 = false;
    window.clearInterval(run2);
  } else if (lock2 == false) {
      lock2 = true;
      run2 = setInterval("chgImg('show2',1)", delay);
  }

}
if ( show == 'show3' ){
  if (lock3 == true) {
    lock3 = false;
    window.clearInterval(run3);
  } else if (lock2 == false) {
      lock3 = true;
      run3 = setInterval("chgImg('show3',1)", delay);
  }
}

}


</script>

</HEAD>


<BODY>
<center>
<img src="images/callisto.jpg" name="slideshow1" width="262" height="262" id="slideshow1">
<table>
<tr>
<td align="right"><a href="javascript:chgImg('show1',-1)">Previous</a></td>
<td align="center"><a href="javascript:auto('show1')">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg('show1',1)">Next</a></td>
</tr>
</table>
</center>

<center>
<img src="images/io.jpg" name="slideshow2" width="262" height="261" id="slideshow2">
<table>
<tr>
<td align="right"><a href="javascript:chgImg('show2',-1)">Previous</a></td>
<td align="center"><a href="javascript:auto('show2')">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg('show2',1)">Next</a></td>
</tr>
</table>
</center>

<center>
<img src="images/ganymede.jpg" name="slideshow3" width="262" height="261" id="slideshow3">
<table>
<tr>
<td align="right"><a href="javascript:chgImg('show3',-1)">Previous</a></td>
<td align="center"><a href="javascript:auto('show3')">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg('show3',1)">Next</a></td>
</tr>
</table>
</center>





</BODY>
</HTML>
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now