Photo slideshow: How to combine buttons & thumbnails

I have created a photo slideshow which users can navigate two ways: previous/next buttons and scrolling through thumbnails. I created these separately so that they work independently of each other. I would now like them to work in tandem. More specifically, I would like the buttons to be able to recognize which photo is being currently displayed and then display the next/previous one in the array.

Here is my script for the buttons:

[code=php]<script language=”JavaScript” type=”text/JavaScript”>
<!–
imgArray = new Array(
“photo1.jpg”,
“photo2.jpg”,
“photo3.jpg”
”
);

baseURL = “http://mysite/photos”;
numImages = 3;
curImage = 1;

function f_slideshow( xflip ) {
curImage = curImage + xflip;
if (curImage > numImages)
{ curImage = 1 ; }
if (curImage == 0)
{ curImage = numImages ; }
document.images[“lg01″].src = baseURL + ‘/’ + imgArray[curImage – 1];
}

//–>
</script>

<input type=”button” value=”&lt;&lt; Prev” name=”prev” onclick=”f_slideshow(-1)” />
<input type=”button” value=”Next &gt;&gt;” name=”next” onclick=”f_slideshow(1)” />[/code]

The large photo and thumbnails are displayed and swapped as follows using the Dreamweaver Swap Image behavior:

[code=php]<img src=”photos/photo1.jpg” name=”lg01″ id=”lg01″ /><br />
<div id=”scroller”>
<img src=”photos/photo1_thumb.jpg name=”sm01″ id=”sm01″ onclick=”MM_swapImage(‘lg01′,”,’photos/photo1.jpg’,0)” />
<img src=”photos/photo2_thumb.jpg name=”sm02″ id=”sm02″ onclick=”MM_swapImage(‘lg01′,”,’photos/photo2.jpg’,0)” />
<img src=”photos/photo3_thumb.jpg name=”sm03″ id=”sm03″ onclick=”MM_swapImage(‘lg01′,”,’photos/photo3.jpg’,0)” />[/code]

It all works fine as is but how can I get the function f_slideshow above to recognize which photo is currently being displayed as “lg01” and go to the previous or next one in the array?

I know I can do this in Flash but I don’t want to have to create 25 new slideshows.

Thanks in advance for any help.

Rick

Also in #JavaScript _↴