Jquery 썸네일 갤러리 모든 이미지 변경

Question

멋진 콘텐츠를 포함하는 멋진 상자를 사용하여 jQuery 효과를 만들려고했는데 그 안에 미리보기 이미지가있는 큰 이미지가 있습니다. 축소판을 클릭 한 다음 큰 이미지를 업데이트하려고했을 때 발생했습니다 (RACE 12 이미지 참조). 이것은 잘 작동하지만 문제는 내가 내 웹 사이트 (SEE RACE ONE 상자)에있는 다른 멋진 상자로 이동 한 다음 마지막으로 클릭 한 작은 이미지가되도록 이미지가 업데이트 된 것입니다.

나는 이것이 이벤트 버블 링일지도 모른다고 생각했지만 기본값 방지는 도움이되지 못했습니다.

저는 jQuery에 매우 익숙하며, 제가하고있는 일에 어리 석다는 것을 알고 있습니다.

모든 조언을 주시면 감사하겠습니다. jQuery를위한 http://www.goodwood.co.uk/members-meeting/the-races.aspx

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); 

Answer 1

$ ('인종 - 이미지 주가.')도, 그 클래스의 모든 요소를 ​​선택합니다 현재 보이지 않는 것들.

당신은 (클릭 이벤트 처리기 내부에 위치) 아래 코드 그래서 새로운 코드가 같아야합니다

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

에 따라 클릭 한 요소에 가장 가까운 '.races 메인 이미지'를 선택할 수 있습니다 :

$('.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();' false를 반환; 그것을 포함하고 e.preventDefault()가 어떤 경우에도 실행되는 것을 막고있었습니다.