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

[fxwoody]

WOW!! No one with any solutions???

It could have been a cool addon for the forums

[Lynne]

So when the alt title comes up, have you tried using something like firebug to see what path it is using to look for the image? It's hard to troubleshoot this when I can't see it in action.

[fxwoody]

Tks Lynne for your time Actually, i didn't think of Firebug!! lol
I will make some test and come back to you with what i got.

Appreciated

By the way, maybe you would have a better idea for this??? Like a javascript mouseover or even plain CSS that could do the same thing?!?!

Cheers

[fxwoody]

Lynne! you can close this thread! I made a new post with the script for it

Tks