Jquery Fancy Thumbnail Hover Effect on Product page

Hello there since i started playing around with Zen Cart I have tested allot of things and now I really starting to get to know how it works.
I have been implementing my cart with jQuery for the last weeks by finding jQuery plugins and with help of the wiki now I know exactly how i want my product page to look I am trying to get this plugin to work but there is some hard code changing to do so I'll have to ask some one for help.

This is a great looking and very nice jQuery plugin from Soh Tanaka

unordered three columned list.
the xhtml

<ul class="thumb">
	<li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>

Dress it Up – CSS

ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 10px;
	width: 360px;
}
ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 110px;
	height: 110px;
}
ul.thumb li img {
	width: 100px; height: 100px; /* Set the small thumbnail size */
	-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
}
ul.thumb li img.hover {
	background:url(thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
	border: none; /* Get rid of border on hover */

And the js (jQuery)

$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
	$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
		.animate({
			marginTop: '-110px', /* The next 4 lines will vertically align this image */ 
			marginLeft: '-110px',
			top: '50%',
			left: '50%',
			width: '174px', /* Set new width */
			height: '174px', /* Set new height */
			padding: '20px'
		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

	} , function() {
	$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
	$(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
		.animate({
			marginTop: '0', /* Set alignment back to default */
			marginLeft: '0',
			top: '0',
			left: '0',
			width: '100px', /* Set width back to default */
			height: '100px', /* Set height back to default */
			padding: '5px'
		}, 400);
});

So what I want to do is to make the Zencart built in image handeler link in the main product image and the tumbs so that I can use the Zen Cart standard Way of adding images to a product Anny help and suggestions are welcome.

Thank You

PS. This might be a little challenge to you master coders out there.DS

Would also be great with some if statements so if a product does not have allot of additional images there will only be one column of thumbs and if possible having the thumbs under the main image container.

And :oops: I have the latest Zen Cart with a custom theme created from the template_default theme I know how to put the files in the right structure but the thing is I get a little bit lost :shocking: in the codes above.