Questions on slideshow

Hi,
I'm a newbie in javascript. I'm currently working on a slideshow javascript where I combined 2 slideshow javascripts together. The problem I'm facing now is that the slide show scripts don't work together perfectly. My slideshow is navigated in 2 ways, one of which is by clicking on the smaller preview images and here is the code:


<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Jenny Blewitt (webmaster@webdesignsdirect.com) -->
<!-- Web Site: http://www.webdesignsdirect.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
// End -->
</script>


Another was the normal slideshow with start, stop, next and previous buttons, the code:

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Mike Canonigo (mike@canonigo.com) -->
<!-- Web Site: http://www.munkeehead.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
NewImg = new Array (
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg"

);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

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

var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.mainpic.src = NewImg[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
// End -->
</script>


And here's the html :

<table border="0" cellpadding="1" cellspacing="0" width="440">
<tr>
<td colspan=4 width="440">
<img name="mainpic" src="1.jpg" border="0" width="440px"></td>
</tr>
<tr>
<td align="left" width="105">
<a href="javascript:auto()">Start/stop slide show</a>
</td>
</tr>
<tr>
<td class="button" align="left"><a href="javascript:chgImg(-1)">«« Previous</a></td>
<td></td>
<td></td>
<td class="button" align="right"><a href="javascript:chgImg(1)">Next »»</a></td>
</tr>
<tr>
<td width="103"><a href="javascript:doPic('1.jpg');">
<img src="1.jpg" width=100 height=75 border=0></a></td>
<td width="103"><a href="javascript:doPic('2.jpg');">
<img src="2.jpg" width=100 height=75 border=0></a></td>
<td width="103"><a href="javascript:doPic('3.jpg');">
<img src="3.jpg" width=100 height=75 border=0></a></td>
<td width="103"><a href="javascript:doPic('4.jpg');">
<img src="4.jpg" width=100 height=75 border=0></a></td>
</tr>
</table>


The problem I'm facing is that when I click on the small thumbnails, the chgimg(1)/(-1) function is not updated by the current image. For example, the starting image is 1.jpg. After i clicked on the small thumbnail of 3.jpg, the main picture was functioned to view 3.jpg. However, when I click <Next>, the picture goes to 2.jpg instead of 4.jpg. Whenelse if I click <Previous>, the main picture goes to 4.jpg instead of 2.jpg. Can someone help me with the code?

You need to update the global variable ImgNum whenever a thumbnail is clicked...


<script>
var ImgNum = 0;
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);


function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
alert('ImgNum = '+ImgNum);
ImgNum = parseInt(imgName);
alert('ImgNum = '+ImgNum);
}
}

</script>
<img name="mainpic" src="0.jpg" border="0" width="440px">
<a href="javascript:doPic('2.jpg');">
<img src="1.jpg" width=100 height=75 border=0></a>


.....Willy

Thanks for the tip Willy! Unfortunately, the chgimg() function and the slideshow function - auto() don't work anymore once i changed the script. It appears that it doesn't know which image to display.

Sorry to double post.. I'm still a newbie and I am stuck with these codes for a vary long time. Is there anyone who could help me with my codes?? Anyone's help will be much appreciated!