Popup Image Viewer (With Next & Previous)

[eclipse33]

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=&quot;0&quot; cellpadding=&quot;0&quot;>
<caption><strong>Air Show Photos</strong></caption>
<tr>
<td width=&quot;100%&quot;><img src=&quot;plane1.gif&quot; width=&quot;300&quot; height=&quot;240&quot; name=&quot;photoslider&quot;></td>
</tr>
<tr>
<td width=&quot;100%&quot;><form method=&quot;POST&quot; name=&quot;rotater&quot;>
<div align=&quot;center&quot;><center><p><script language=&quot;JavaScript1.1&quot;>
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]=&quot;plane1.gif&quot;
photos[1]=&quot;plane2.gif&quot;
photos[2]=&quot;plane3.gif&quot;
photos[3]=&quot;plane4.gif&quot;
photos[4]=&quot;plane5.gif&quot;


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=&quot;button&quot; value=&quot;<<Back&quot; name=&quot;B2&quot;
onClick=&quot;backward()&quot;> <input type=&quot;button&quot; value=&quot;Next>>&quot; name=&quot;B1&quot;
onClick=&quot;forward()&quot;><br>
<a href=&quot;#&quot; onClick=&quot;which=1;backward();return false&quot;><small>Start Over</small></a></p>
</center></div>
</form>
</td>
</tr>
</table>

<p align=&quot;center&quot;><font face=&quot;arial&quot; size=&quot;-2&quot;>This free script provided by</font><br>
<font face=&quot;arial, helvetica&quot; size=&quot;-2&quot;><a href=&quot;

http://javascriptkit.com&quot;>JavaScript

Kit</a></font></p>

 

[palbano]

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

You should be able to do that using the .innerHTML property.

<div id=&quot;pic&quot;><img src=&quot;pic1a.jpg&quot;></div>

then in your handler for &quot;Next&quot;

document.getElementsById(&quot;pic&quot;).innerHTML = &quot;<img src='pic2a.jpg'>&quot;;

Of course you have to manage knowing what file name to put in the &quot;src&quot; attribute probably using an array.


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)

For that you just use a window name for the popup window that keeps the same browser instance being used all the time.

<a href=”mypopup.htm” target=”picpopwindow”>Click here</a>

hope that helps
-pete