This might help.
You have to name your images in a particular manner. They be like this format:
For thumbnails:
img_1_tmb.jpg
img_2_tmb.jpg
img_3_tmb.jpg
...etc.
For fullsized images:
img_1_full.jpg
img_2_full.jpg
img_3_full.jpg
Each thumbnail must correspond with it's full sized counterpart. For example, tht thumbnail called img_1_tmb.jpg corresponds with img_1_full.jpg.
The only thing you need to change in the script is the value for the variable called numberOfImages, to reflect the number of images you want to load onto the page. In the script example below, that is set to 2 because i tested with 2 images.
This script assumes you have the images placed in a directory called "images'. and that the normal path to reference an image would be "images/img_1_tmb.jpg" You can alter the path by changing the pth="images/" value to suit your own. All the images need to be in the same directory.
See how it goes anyway.
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
<!--
function outputImages(){
var thumbsArray=new Array()
var fullSizeArray=new Array()
var pth="images/"
var printOut=""
var numberOfImages=2 //change this
printOut+="<table width=\"40%\" align=\"center\" border=\"1\">"
for(i=0;i<numberOfImages;i++){
thumbsArray[i]=new Image()
thumbsArray[i].src=pth+"img_"+(i+1)+"_tmb.jpg"
fullSizeArray[i]=new Image()
fullSizeArray[i].src=pth+"img_"+(i+1)+"_full.jpg"
printOut+="<tr><td><a href=\"javascript: void window.open('"+fullSizeArray[i].src+"','','width=300,height=300')\">"
printOut+="<img src=\""+thumbsArray[i].src+"\" border=\"0\"></a></td></tr>"
}
printOut+="</table>"
document.write(printOut)
}
// -->
</script>
</head>
<body>
<div style="text-align:center;">
<h1>Image Collection</h1>
</div>
<script language="javascript" type="text/javascript">
outputImages()
</script>
</body>
</html>