Jquery thumbnail gallery changing all images

Question

I've tried to create a jQuery effect using fancy box to contain my content and within that is a large image with thumbnails below. What I was trying to make happen was when the thumbnails are clicked then the large image updates (see RACE Twelve image as an example). This works fine but the problem is when I go to another fancy box on my website (SEE RACE ONE box) then that image has been updated to be whatever thumbnail was clicked last.

I thought this might be event bubbling but preventing default hasn't helped.

I'm very new to jQuery and know that this is something stupid that I'm doing.

Any advice would be greatly appreciated? Thank you :)

Live version of page: http://www.goodwood.co.uk/members-meeting/the-races.aspx

jsfiddle for jQuery: 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);

Answer 1

$('.races-main-image') will select all elements with that class, even the ones which aren't currently visible.

You can select the closest '.races-main-image' to the clicked element as per the code below (when placed inside the click event handler)

$('.races-main-image', $(e.target).closest('.races-fancy-box'))

So your new code should look like:

$('.races-thumbnail').live("click", function (e) {
    var racesmainimage = $('.races-main-image', $(e.target).closest('.races-fancy-box'));
    var racesimagewrap = $('.races-image-wrap', $(e.target).closest('.races-fancy-box'));
    racesmainimage.hide();
    racesimagewrap.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 () {
        racesmainimage.attr('src', i.attr('src'));
        racesimagewrap.css('background-image', 'none');
        racesmainimage.fadeIn();
    });
    return false;
});

I've also removed your 'e.preventDefault();' return false; includes that, and was preventing e.preventDefault() from being executed in any case.