I'm trying to design this site so that there is an image carousal with a mid-size image shown above small thumbnail options of other pictures.
The problem is, the way it shows right now, the "thumbnails" per-say are showing as full size. I tried editing the JavaScript in the document.write section to add height and width elements, but it wasn't working correctly.
Can someone help me get it to work? I've defaulted the code back to when it was showing full size images instead of thumbnails.
This is what I have so far:
var photos = new Array();
var photoindex = 0;
photos[0] = "images/piano.jpg";
photos[1] = "images/guitar.jpg";
photos[2] = "images/studio.jpg";
photos[3] = "images/sheetmusic.jpg";
function backward() {
if (photoindex > 0) {
document.images.p.src = photos[--photoindex];
}
}
function forward() {
if (photoindex < photos.length - 1) {
document.images.p.src = photos[++photoindex];
}
}
function goto(n) {
if (n < photos.length && n >= 0) {
photoindex = n;
document.images.p.src = photos[photoindex];
}
}
</script>
<br>
<div style="text-align:center;left:5px;">
<table width="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" align="center" valign="top">
<img src="images/weloveweb.png" name="p" width="250" height="188" id="p" /></td>
</tr>
<tr>
<td valign="top"><a href="javascript: backward();"><<</a></td>
<td valign="top" style="text-align: center">
<script type="text/javascript">
for (i = 0; i < photos.length; i++) {
document.write("<a href=\"javascript: goto(" + i + ");\">" + "<img src='" + photos[i] + "' /></a> ");
}
</script>
</td>
<td valign="top" style="text-align: right"><a href="javascript: forward();">>></a></td>
</tr>
</table>
</div>