Try
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);
});
Another approach
function myFunction() {
var $large = jQuery('#largeImage');
//you can also use a closure variable, if you don't want to change the default image in the same page you can use this one.
//but if you want to change the default image using a function it won't work, in the first approach along with the src attribute if you change the data src that will work
var src = $large.attr('src');
jQuery('#thumbs img').hover(function () {
$large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
}, function () {
$large.attr('src', src);
});
}
jQuery(document).ready(function () {
jQuery(myFunction);
});