Trying to make a page of thumbnails open a slideshow to specified images. I'm very new to all this fancy javascript code, but I understand HTML pretty well. Any help would be greatly appreciated!

Here's a link to the thumbnail gallery

Here's where I'm at with the code for the slideshow page. I've tried for days to figure out how to make this work to no resolve.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Swis721_Hv_BT_400.font.js" type="text/javascript"></script>
// Use the following variable to specify
// the number of images
var NumberOfImages = 20

var img = new Array(NumberOfImages)

// Use the following variables to specify the image names:
img[0] = "images/culinary/large/food01.jpg"
img[1] = "images/culinary/large/food02.jpg"
img[2] = "images/culinary/large/food03.jpg"
img[3] = "images/culinary/large/food04.jpg"
img[4] = "images/culinary/large/food05.jpg"
img[5] = "images/culinary/large/food06.jpg"
img[6] = "images/culinary/large/food07.jpg"
img[7] = "images/culinary/large/food08.jpg"
img[8] = "images/culinary/large/food09.jpg"
img[9] = "images/culinary/large/food10.jpg"
img[10] = "images/culinary/large/food11.jpg"
img[11] = "images/culinary/large/food12.jpg"
img[12] = "images/culinary/large/food13.jpg"
img[13] = "images/culinary/large/food14.jpg"
img[14] = "images/culinary/large/food15.jpg"
img[15] = "images/culinary/large/food16.jpg"
img[16] = "images/culinary/large/food17.jpg"
img[17] = "images/culinary/large/food18.jpg"
img[18] = "images/culinary/large/food19.jpg"
img[19] = "images/culinary/large/food20.jpg"

var imgNumber = 0

function NextImage()
if (imgNumber == NumberOfImages)
imgNumber = 0
document.images["VCRImage"].src = img[imgNumber]

function PreviousImage()
if (imgNumber < 0)
imgNumber = NumberOfImages - 1
document.images["VCRImage"].src = img[imgNumber]

<!--[if lt IE 7]>
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">

<body id="page3">
<div class="main">
<div class="container"> <div class="pRelative">
<a href="index.html"><img alt="" src="images/logo2.png" class="logo1" /></a>
<a href="javascript:PreviousImage()"><img alt="" src="images/arrow1.png" class="arrow1 png" /></a>
<a href="javascript:NextImage()"><img alt="" src="images/arrow2.png" class="arrow2 png" /></a>
<img src="images/culinary/large/food01.jpg" NAME="VCRImage"/><br />

</div> </div>
<div class="indent-1"><div id="footer" class="png">
<div class="indent-footer">&copy; 2013 Matt Faria Photography | <a href="index-7.html">Privacy Policy</a></div>

<script type="text/javascript">; </script>