Hello everyone, i'm having problems figuring out how to write a script that will fetch images from my directory and display them on my slideshow on a per product basis. I only want the images of each product showing up and not all of the images from my directory. If you could tell me what needs to be added in order for my javascript to do this please let me know. Any help would be greatly appreciated.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<script type="text/javascript">

var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false; 
var nInterval = "";
var placeHolderImg = new Image();

function brushIn(currImg,nextImg){

clearInterval(nInterval); 
currImg.src = nextImg;
var nOpacity = 0; 
nInterval = setInterval(function()
{
nOpacity < 100 ? nOpacity = nOpacity + 7 : clearInterval(nInterval);
IE ? currImg.style.filter = "alpha(opacity = "+nOpacity+")"
: currImg.style.opacity = (nOpacity / 100); 
}, 5); 
}

function brushOut(currImg,nextImg){

var nOpacity = 100; 
nInterval = setInterval(function()
{
nOpacity > 0 ? nOpacity = nOpacity - 50 : brushIn(currImg,nextImg);
IE ? currImg.style.filter = "alpha(opacity = "+nOpacity+")"
: currImg.style.opacity = (nOpacity / 100); 
}, 3); 
}

function swapFullSize(fullSizeImgContainer,nextImg){

var currFullImg = fullSizeImgContainer.getElementsByTagName('img')[0]; 
var nextFullImg = nextImg.getElementsByTagName('img')[0].src;
placeHolderImg.src = nextFullImg;
setTimeout(function()
{
brushOut(currFullImg,placeHolderImg.src);
}, 400);
}

function init(){

var fullSizeImg = document.getElementById('fullSize'); 
var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
for (i=0; i<nGallery.length; i++)
{
nGallery[i].onclick = function()
{
swapFullSize(fullSizeImg,this); 
return false;
} 
nGallery[i].href = "#"; 
} 
}

IE ? attachEvent('onload', init, false) : addEventListener('load', init, false); 

</script>
<style type="text/css">

body {background-color: #ffffff;}
.fullSize {margin: 25px;} 
.thumbNail {width: 600px; background-color: #ffffff; text-align: center;
margin-left: auto; margin-right: auto; margin-top: 15px;}
.thumbNail img {border: 2px solid blue; margin-left: 15px; margin-top: 5px; margin-bottom: 0px;
width: 120px; height: 88px;} 

.style1 {
	margin: 25px;
	text-align: center;
}

</style>
</head>
<body>
<div id="fullSize" class="style1"><img src="../Pictures/2010-06-26 whitman/whitman 007.JPG"></div>

<div id="photoGallery" class="thumbNail">
<a href="../Pictures/2010-06-26%20whitman/whitman%20007.JPG"><img src="../Pictures/2010-06-26 whitman/whitman 007.JPG" alt="First Image Description" title="First Image Description"></a>
<a href="../Pictures/2010-06-26%20whitman/whitman%20008.JPG"><img src="../Pictures/2010-06-26 whitman/whitman 008.JPG" alt="Second Image Description" title="Second Image Description"></a>
<a href="../Pictures/2010-06-26%20whitman/whitman%20009.JPG"><img src="../Pictures/2010-06-26 whitman/whitman 009.JPG" alt="Third Image Description" title="Third Image Description"></a>
<a href="../Pictures/2010-06-26%20whitman/whitman%20010.JPG"><img src="../Pictures/2010-06-26 whitman/whitman 010.JPG" alt="Fourth Image Description" title="Fourth Image Description"></a>
</div>
</body>
</html>