I have a gallery in HTML Code, and I have been trying to make a gallery where the pictures pop up, like an image overlay. It hasn't worked. Like in this website. http://fancybox.net/home
I have tried everything and I just cant seem to find out what im doing wrong. My normal HTML Code is as follows :
<html>
<head><title>Gallery</title>
<body bgcolor="black" background="pics/kb_snakeskin_bg_bigger.jpg" style+"background-attachment: fixed;">
<!-- Hidden msg to self -->
<table align="center" width="850" height="100%"
border="1" bordercolor="blue" cellpadding="0" cellspacing="0"
bgcolor="grey">
<tr>
<td align="center" height="125">
<img src="pics/kobe_banner.gif"></td>
</tr>
<tr>
<td align="center" height="40">
<a href="mm_index.html">
<img src="pics/home_button.gif" border="0"></a>
<a href="mm_one_column.html">
<img src="pics/button_bio.gif" border="0"></a>
<a href="mm_two_column.html">
<img src="pics/button_sponsors.gif" border="0"></a>
<a href="mm_three_column.html">
<img src="pics/button_achievements.gif" border="0"></a>
<a href="mm_gallery.html">
<img src="pics/button_gallery.gif" border="0"></a>
</td>
</tr>
<tr>
<td valign="top" style="padding: 10px;">
<!-- Start of Inner Table for my Gallery -->
<table width="100%" height="100%" border="1" bgcolor="grey"
bordercolor="blue" cellpadding="0" cellspacing="0">
<tr>
<td width="33%" align="center">
<a href="pics/kb_40.jpg">
<img src="pics/kb_thumb_1.jpg" border="0"></a>
</td>
<td width="33%" align="center">
<a href="pics/kb_19.jpg">
<img src="pics/kb_thumb_10.jpg" border="0"></a>
</td>
<td width="33%" align="center">
<a href="pics/kb_5.jpg">
<img src="pics/kb_thumb_3.jpg" bgcolor="blue" border="0"></a>
</td>
</tr>
<tr>
<td width="33%" align="center">
<a href="pics/kb_32.jpg">
<img src="pics/kb_thumb_4.jpg" border="0"></a>
</td>
<td width="33%" align="center">
<a href="pics/kb_27.jpg">
<img src="pics/kb_thumb_5.jpg" border="0"></a>
</td>
<td width="33%" align="center">
<a href="pics/kb_33.jpg">
<img src="pics/kb_thumb_6.jpg" border="0"></a>
</td>
</tr>
<tr>
<td width="33%" align="center">
<a href="pics/kb_20.jpg">
<img src="pics/kb_thumb_7.jpg" border="0"></a>
</td>
<td width="33%" align="center">
<a href="pics/kb_11.jpg">
<img src="pics/kb_thumb_8.jpg" border="0"></a>
</td>
<td width="33%" align="center">
<a href="pics/kb_16.jpg">
<img src="pics/kb_thumb_9.jpg" border="0"></a>
</td>
</tr>
</table>
<!-- End of the Inner -->
</td>
</tr>
<tr>
<td align="center" height="40">
<b> (C) 2012 - Name - (R) </b>
</td>
</tr>
</table>
</body>
</html>

Can someone play around with it and try to show me what codes to put where? Thank you for your time.