Hello,
I made a image gallery using a table which consists of five thumbnails at the button of the table and when one of the thumbnails is clicked the larger size image will appear on the top/main part of the table.
I've added two arrows underneath the table as I would like the arrow to bring up five different thumbnail images once the arrow is clicked. The new thumbnails will also have to be clickable in order to view its corresponding larger size on the top/main part of the table.
So this all happens within the same table, just the thumbnails can be changed. They can either slide, fade in or out or just simply appear. I would prefer if they were to slide over like a transition or something but it doesn't have to be. I do not wish to use JQuery or some type of extension. I just want to use JavaScript if this is possible.
Here is my code so far
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<center>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
<body>
<br>
<table style="background-color:white; margin-left:auto margin-right:auto; margin-top:auto" width="963" border="0" cellpadding="0">
<tr>
<th colspan="5" scope="col"><img src="images/largepic1.jpg" alt="largepic1" name="MAIN" width="963" height="640" id="MAIN" /></th>
</tr>
<tr>
<td><img src="images/thumbnail1.jpg" alt="thumbnail1" name="AT1" width="191" height="125" id="AT1" onclick="MM_swapImage('MAIN','','images/largepic1.jpg',1)" /></td>
<td><img src="images/thumbnail2.jpg" alt="thumbnail2" name="AT2" width="191" height="125" id="AT2" onclick="MM_swapImage('MAIN','','images/largepic2.jpg',1)" /></td>
<td><img src="images/thumbnail3.jpg" alt="thumbnail3" name="AT3" width="191" height="125" id="AT3" onclick="MM_swapImage('MAIN','','images/largepic3.jpg',1)" /></td>
<td><img src="images/thumbnail4.jpg" alt="thumbnail4" name="AT4" width="191" height="125" id="AT4" onclick="MM_swapImage('MAIN','','images/largepic4.jpg',1)" /></td>
<td><img src="images/thumbnail5.jpg" alt="thumbnail5" name="AT5" width="191" height="125" id="AT5" onclick="MM_swapImage('MAIN','','images/largepic5.jpg',1)" /></td>
</tr>
</table>
<img src="images/leftarrow.gif" name="LeftArrow" id="LeftArrow" /><img src="images/rightarrow.gif" name="RightArrow" id="RightArrow" />
</body>
</center>
</html>
Please let me know if this is the incorrect forum to ask this type of question and please point me in the right direction, if you know where I might be able to get some assistance.
Thank you kindly
Mike
Before you post, read our: 
