Jquery缩略图库正在更改所有图像

我试着用花哨的盒子来创建一个jQuery效果，里面有一个下面有缩略图的大图像。我试图做到的是，当点击缩略图时，大图像就会更新（例如，请参阅RACE Twelve图像）。这很好，但问题是，当我转到我网站上的另一个花哨的框（SEE RACE ONE框）时，该图像已经更新为上次点击的缩略图。

我认为这可能是事件冒泡，但防止默认并没有帮助。

我是jQuery的新手，我知道我正在做的事情很愚蠢。

如果有任何建议，我们将不胜感激？谢谢：）

页面的实时版本：http://www.goodwood.co.uk/members-meeting/the-races.aspx

jQuery的jsfiddle：http://jsfiddle.net/greenhulk01/JXqzL/

(function ($) {
    $(document).ready(function () {
        $('.races-thumbnail').live("click", function (e) {
            $('.races-main-image').hide();
            $('.races-image-wrap').css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
            var i = $('<img />').attr('src', this.href).load(function () {
                $('.races-main-image').attr('src', i.attr('src'));
                $('.races-image-wrap').css('background-image', 'none');
                $('.races-main-image').fadeIn();
            });
            return false;
            e.preventDefault();
        });
        $(".races-image-wrap img").toggle(function () { //fired the first time
            $(".races-pop-info").show();
            $(this).animate({
                width: "259px",
                height: "349px"
            });
        }, function () { // fired the second time 
            $(".races-pop-info").hide();
            $('.races-main-image').animate({
                width: "720px",
                height: "970px"
            });
        });
        $('#fancybox-overlay, #fancybox-close').live("click", function () {
            $(".races-pop-info").show();
            $(".races-main-image").animate({
                width: "259px",
                height: "349px"
            });
        });
    });
})(jQuery);