Solved

Multiple javascript slideshows - need help defining different slideshow lengths

Posted on 2003-11-06
5
309 Views
Last Modified: 2008-03-10
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
Comment
Question by:dialektkid
  • 2
  • 2
5 Comments
 
LVL 10

Expert Comment

by:Bustarooms
ID: 9695607
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
 
LVL 10

Accepted Solution

by:
Bustarooms earned 250 total points
ID: 9695610
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
 
LVL 4

Expert Comment

by:apprenti
ID: 9695731
var ImgLength = NewImg1.length - 1

This variable is being used as the length for all the slideshows.
0
 
LVL 4

Expert Comment

by:apprenti
ID: 9695913
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
 

Expert Comment

by:bhatiashardeep
ID: 9696034
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question