The following script scrolls images with buttons and when the image is clicked it shows the enlarged image. I want to modify it so that I can click on some of the images and have links attached that will move with the image when the next group of images is viewed. Additionally I want to have Captions for the images that will move as well.
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var current=1;
var maxImages=11;
if(document.images)
{
thumbs = new Array();
for (var idx=1;idx<=maxImages;idx++
) {
thumbs[idx] = new Image();
thumbs[idx].src = 'Pictures/test/newphoto'+i
dx+'.jpg';
}
}
function init() {
for (var idx=1;idx<=5;idx++) {
document.getElementById('v
iewimg'+id
x).src = thumbs[idx+current-1].src;
}
}
function prev() {
current = current - 5;
if (current<1) current=1;
for (var idx=1;idx<=5;idx++) {
document.getElementById('v
iewimg'+id
x).src = thumbs[idx+current-1].src;
}
}
function next() {
current = current + 5;
if (current>(maxImages-4)) current=(maxImages-4);
for (var idx=1;idx<=5;idx++) {
document.getElementById('v
iewimg'+id
x).src = thumbs[idx+current-1].src;
}
}
function clicked(src) {
document.getElementById('i
mgMain').s
rc = src;
}
//-->
</script>
<title>New Photo Page</title>
</head>
<body>
<table style="border-collapse: collapse;" id="table1" border="0"
cellpadding="0" cellspacing="10" width="600">
<tbody>
<tr>
<td width="135">
<table style="border-collapse: collapse;" id="table2" border="0"
cellpadding="0" cellspacing="10" width="100%">
<tbody>
<tr>
<td align="center"><input value="Prev" name="bPrev"
onclick="prev();" type="button"><input value="Next" name="bNext"
onclick="next();" type="button"></td>
</tr>
<tr>
<td align="center"><a
href="javascript:clicked(d
ocument.ge
tElementBy
Id('viewim
g1').src);
"><img
id="viewimg1" src="Pictures/test/newphot
o1.jpg" border="0" height="100"
width="100"></a></td>
</tr>
<tr>
<td align="center"><a
href="javascript:clicked(d
ocument.ge
tElementBy
Id('viewim
g2').src);
"><img
id="viewimg2" src="Pictures/test/newphot
o2.jpg" border="0" height="100"
width="100"></a></td>
</tr>
<tr>
<td align="center"><a
href="javascript:clicked(d
ocument.ge
tElementBy
Id('viewim
g3').src);
"><img
id="viewimg3" src="Pictures/test/newphot
o3.jpg" border="0" height="100"
width="100"></a></td>
</tr>
<tr>
<td align="center"><a
href="javascript:clicked(d
ocument.ge
tElementBy
Id('viewim
g4').src);
"><img
id="viewimg4" src="Pictures/test/newphot
o4.jpg" border="0" height="100"
width="100"></a></td>
</tr>
<tr>
<td align="center"><a
href="javascript:clicked(d
ocument.ge
tElementBy
Id('viewim
g5').src);
"><img
id="viewimg5" src="Pictures/test/newphot
o5.jpg" border="0" height="100"
width="100"></a></td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="465">
<table style="border-collapse: collapse;" id="table3" border="2"
bordercolor="#000000" cellpadding="0">
<tbody>
<tr>
<td><img id="imgMain" src="Pictures/test/newphot
o1.jpg"
border="0" height="253" width="313"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script>init();</script>
</body>
</html>
