Good Jquery Challenge

[fxwoody]

Ok, i'm totally stuck here with this code!

I have "product-thread_thumbnails_v31" installed and working well, tho, i want my member to be able to see the thumbnail a bit better when they scroll in the threadlist.

So, i found a little Jquery script that should normally resize the thumb on mouseover but i can't seem to get the image to get fetch by the script Only thing that comes up is the box for the ALT"" attribute to show (as normally the img should be there)

Does anyone with Jquery experience could give me some HINTS on how to do this with the script??!!
I had it to work well in my 3.8.6 but the href was easier to get then with our super stylevars system in 4.1.
If we can get this to work, i think it would be a nice little MOD to posts for the others as it could work with almost any image you want in the forum

Here is the Jquery script:

PHP Code:

this.imagePreview = function(){    
    /* CONFIG */
        
        xOffset = 40;
        yOffset = 60;
        
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result
        
    /* END CONFIG */
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='" + this.href + "' alt='Thumbnail' />"+ c +"</p>");                                 
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    });    
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });            
};


// starting the script on page load
$(document).ready(function(){
    imagePreview();
}); 


For the thumbnail to resize, in "thread_thumbnail_threadbit" , we need to add the "class="preview" in the href code, like this:

<a href="{vb:link thread, {vb:raw thread}}" class="preview" id="thread_gotonew_{vb:raw thread.realthreadid}" style="float:left;clear:right;display:block;padding-right:4px;">

Also, in the additional css, i'ved added the "#preview" class :

/* */

#preview{
 position:absolute;
 border:1px solid #ccc;
 background:#333;
 padding:5px;
 display:none;
 color:#fff;
 }

/* */

If anyone as an idea on this, it would be more then appreciated
I must be missing something simple in the codes?

Tks