jQuery Tooltip image rollover display larger image

Question

I have an image gallery that displays a list of thumbnail images. I'm using the jQuery Tooltip plugin to display the image in a tooltip on rollover.

However, I want to display a larger image than my thumbnail image.

$(document).ready(function(){
    $('.imageGalleryAlbum li a img').tooltip({ 
        delay: 0, 
        showURL: false, 
        bodyHandler: function() { 
            return $("<img/>").attr("src", this.src); 
        } 
    });
});

My gallery listed thumbnail image ends with the following "_thumb_150.jpg"

I want to display the "_thumb_630.jpg" from the same directory/folder.

How can I do this?

Answer 1

Try replacing the _150 with 630 from the current image source.

src.replace('150', '630')

bodyHandler: function() { 
    var new_source = this.src.replace('150', '630');

    return $("<img/>").attr("src", new_source); 
}