JQuery for Image Swap On Hover - Need Simple Adjustment

Question

Currently I have this JQuery document in my theme's JS folder to allow me to hover over images and swap them to the featured image like so:

http://test.pillarsoflifebook.com/tables/tabletops/wood/rustic-plank-oak/rustic-plank-oak/

function myFunction() {
    var $large = jQuery('#largeImage');

    //store the default image as the data src
    $large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');
    jQuery('#thumbs img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
    }, function () {
        //on mouse leave put back the original value
        $large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction);
});

For another page in my clients site I need the same function WITHOUT the featured image returning to the original. Hence .. when you hover and the featured image changes ... it needs to remain changed when you hover off again.

Should I add another script (pretty much the same with minor adjustments) for this?

Thank you!

Answer 1

Use this code

function myFunction() {
    var $large = jQuery('#largeImage');

    //store the default image as the data src
    //$large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');
    jQuery('#thumbs img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
    }, function () {
        //on mouse leave put back the original value
        $large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction);
});

Should i explain?

Answer 2

Just remove the code that puts the original image back

    function myFunction() {
    var $large = jQuery('#largeImage');

    //store the default image as the data src
    $large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');
    jQuery('#thumbs img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
    }, function () {
        //on mouse leave put back the original value
        //$large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction);
});