Popup Image Viewer (With Next & Previous)

[eclipse33]

Hi,

I am attempting to set up a photo gallery on my page. I have a table full of thumbnails. I want to be able to click on a thumbnail (pic1.jpg) and for this click to load a new window with a larger version of the picture (pic1a.jpg) but....

In the new popup I want a Next & Previous button that will scroll thru all the pictures (pic1a.jpg, pic2a.jpg...) and...

If the user goes back to the main page with the tumbnails and clicks on a different thumbnail I want it to load in the same window as the previous thumbnail (ie: I don't want 5 or 6 new windows opeing up if the user doesn't close each one)

Any help would be appreciated...

I have found the below code for the viewer but how would I configure the rest?

Thanks in advance
eclipse33


<table border="0" cellpadding="0">
<caption><strong>Air Show Photos</strong></caption>
<tr>
<td width="100%"><img src="plane1.gif" width="300" height="240" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="plane1.gif"
photos[1]="plane2.gif"
photos[2]="plane3.gif"
photos[3]="plane4.gif"
photos[4]="plane5.gif"


function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="&lt;&lt;Back" name="B2"
onClick="backward()"> <input type="button" value="Next&gt;&gt;" name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a></p>
</center></div>
</form>
</td>
</tr>
</table>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>:confused: :confused: