Lightbox Opens and then closes without showing pic

I can't seem to figure out what I am doing wrong. When you click the photo the script opens and then closes and never shows the slide show.
Test site : http://www.royalraves.com/test/html/pets.html

Blackbox.css

#lightbox{
position: absolute;
top: 0px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #f7f6f1;
width: 250px;
height: 250px;
margin: 0 auto;
border: 1px #CCC solid;
border-bottom:0px;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 0px;
width: 0px;
z-index: 0;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink2, #nextLink2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000;
font-weight:bold;
cursor:pointer;
}

#imageDataContainer{
font: 14px Arial, Helvetica, sans-serif;
background-color: #f7f6f1;
height: 35px;
border:1px #ccc solid;
border-top:0px;
margin:auto;
}

#imageData{
padding:0px 10px 10px 10px;
}
#imageData #imageDetails{ width: 50%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; font-size:11px; color:#666; max-height:20px; }
#imageData #numberDisplay{ display: block; clear: left; font-weight: normal; font-size:14px; color:#333; padding-bottom: 5px; }
#imageData #slideshowLink{ width: 55px; float: right; padding:5px 0px 0 0px;}
#imageData #bottomNavClose{ width: 55px; float: right; padding:5px 0px 0 0px; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

* html>body .clearfix {
display: inline;
width: 100%;
}

* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}



In Head:


<!--- JS Code for album --->

<link rel="stylesheet" href="backbox.css" type="text/css" />

<script type="text/javascript" src="js/prototype.compressed.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

<script type="text/javascript" src="js/dhtmlHistory.js"></script>

<script type="text/javascript" src="js/customsignsheader.js"></script>


For the album:
<!--- Album Code for Pets --->



<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">

<a href="images/pets/7.jpg" rel="lightbox[slide]" caption="Benjamin">

<img src="images/pets/7.jpg" alt="Benjamin" width="250" height="180" border="0" /></a>

</div>

<a href="images/pets/1.jpg" rel="lightbox[slide]" caption="Benjamin"></a>

<a href="images/pets/2.jpg" rel="lightbox[slide]" caption="Cat TV"></a>

<a href="images/pets/3.jpg" rel="lightbox[slide]" caption="Hamie"></a>

<a href="images/pets/4.jpg" rel="lightbox[slide]" caption="Sun Spot"></a>

<a href="images/pets/5.jpg" rel="lightbox[slide]" caption="Kita"></a>

<a href="images/pets/6.jpg" rel="lightbox[slide]" caption="Paws to you"></a>

<a href="images/pets/7.jpg" rel="lightbox[slide]" caption="Sun Spot"></a>

<a href="images/pets/8.jpg" rel="lightbox[slide]" caption="Yard Work"></a>

<a href="images/pets/9.jpg" rel="lightbox[slide]" caption="Yes"></a>

<a href="images/pets/10.jpg" rel="lightbox[slide]" caption="Best of Buds"></a>

</center>



</div>

<!--- End of Album Code--->

ok my first statement was wrong. the fucntion countdown() you have attached to the onclick event for the div containing the image, is causing the issue.

what does countdown() do?

also just a side note. Your page loads somewhat slow because the images you are using are 3216x2136 pixels and about 2 megabytes a piece. Bear in mind when you assign a smaller height and width to an IMG element the browser has to download the entire image and compress the image itself. You might want to look into using smaller version of the same images or using a server side solution to compress the smaller versions before sending to the user's browser.
Also in the slideshow it shows the images at their full sizes, which means pretty much 95% of the people viewing the slideshow will have to scroll left to right and up and down to view the entire image, because most people just don't have a screen large enough to view a 3216x2136 image all at once.

- food for thought.

That was it. I just removed the countdown() from it and it works. I guess I was having a moment. Also I will take care of the pictures, I must have uploaded the wrong image folder, because the pictures are big. Thanks so much for the help.

if you are in a PHP environment, you might want to check out somethign like this - http://phpthumb.sourceforge.net/