Галерея миниатюр JQuery, изменяющих все изображения

Question

Я попытался создать эффект jQuery, используя причудливый ящик, чтобы содержать мой контент, и внутри это большое изображение с миниатюрами ниже. То, что я пытался сделать, - это когда щелкают эскизы, а затем большие обновления изображений (см. Пример RACE Twelve в качестве примера). Это прекрасно работает, но проблема заключается в том, что когда я перехожу в другую причудливую коробку на своем веб-сайте (поле SEE RACE ONE), тогда это изображение было обновлено, чтобы в последний раз щелкнуть эскиз.

Я думал, что это может быть событие пузыря, но предотвращение дефолта не помогло.

Я очень новичок в jQuery и знаю, что это что-то глупое, что я делаю.

Любой совет был бы полезен? Спасибо :)

Живая версия страницы: http://www.goodwood.co.uk/members-meeting/the-races.aspx

jsfiddle для 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-образ», по которому щелкнули элемента согласно ниже кода (при помещении внутри обработчика события Click)

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

Так что ваш новый код должен выглядеть следующим образом:

$('.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; 
}); 

Я также удалил ваш e.preventDefault(); return false; включает в себя и предотвращает выполнение функции e.preventDefault() в любом случае.