New Post: Help with images and Jquery?

Hi there guys, I am reaching out to anyone that can help, I am bashing my head against a brick wall at the moment.
I am trying to implement swatches for a color shirt / dress etc to do this I am using some Jquery and CSS that simply uses the default tag gallerys,([TAG:GALLERY1] etc), and then the CSS will have zoomed into the center of the image to ensure that its just not shrinking the image, giving a swatch color essentially.

So what it is suppose to do is allow the user to hover over the swatch and then the image changes the primary image. I have the hover working and its changing the primary image, that not the problem, the thumbnail swatches that I have created don't seem to work. My error is that the thumbnail image is simply 'undefined'.

I Just cant get it to show.

A picture is worth a thousand words so see below:
So I have a primary image

Here the code snipts that you might need to understand how I am doing it. I cant give anyone a link because its a dev machine, but if people can help and they need to see it I will find a server to throw it up on for a little.

productdetail.template

<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>


<div class="Detail">
    
<!-- Begin Images Panel -->
<!-- Begin Soldout Image Overlay -->
    [TAG:TEST:<prop TestType="setting" TestName="soldoutimage.flag" TestValue="1" Action="Show" />]
    [TAG:TEST:<prop TestType="valueof" TestName="QtyRemaining" TestValue="0" Action="Show" />]
    <img alt="Product is Sold Out" class="SoldOutOverlay" src="/Desktopmodules/nb_store/img/SoldOutTab2-en.png" style="width:129px;height:57px" border="0" />
    [TAG:END]
    [TAG:END]
<!-- End Soldout Image Overlay -->
    
<!-- Begin Image Gallery -->
    [TAG:TEST:<prop TestType="hasImages" Action="Show" />]
<div>
    <div id="slideshow" class="ImagePanel pics">[TAG:GALLERY1][TAG:GALLERY2][TAG:GALLERY3][TAG:GALLERY4][TAG:GALLERY5][TAG:GALLERY6][TAG:GALLERY7]
    </div>
         <div>
            <ul id="nav"></ul>  
       </div>
    </div>
    [TAG:END]
<!-- End Image Gallery -->

jquerylightbox.code

jQuery(function() {     jQuery('.jquerylightbox').lightBox(); }); 

// redefine Cycle's updateActivePagerLink function
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager).find('li').removeClass('activeLI')
        .filter('li:eq('+currSlideIndex+')').addClass('activeLI');
};

$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
    $(pager).each(function() {
        console.log(clsName + '; ' + currSlide ); 
        $(this).children().removeClass('activeLI').filter(':eq('+currSlide+')').addClass('activeLI');
    });
};

$(function() {
    $('#slideshow').cycle({
        timeout: 0,
    pagerEvent: 'mouseover',
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img style="position:absolute;left:-15px;top:-15px;"" src="' + slide.src + '" width="50" height="50" /></a></li>';
        }
    });
});

This part of the code src="' + slide.src + '" is the part that is responsable for pulling out the image and displaying it, this currently says undefined.
I have tried just using the [Product:ImageThumb] tag, but it keeps the tag completely intact and does not use it, when you view the source you see the tag as [Product:ImageThumb] still.