이미지 갤러리에 활성 손가락이 있습니다

Question

이 이미지 갤러리를 만들었지 만 현재 사용중인 엄지 손가락에 class = "active"를 지정하고 싶습니다. .small_image 클래스를 클릭하면 "활성"클래스가되지만 다른 엄지 손가락을 클릭하면 클래스가 "활성"클래스가됩니다. 그래서 if 문을 만들면 큰 이미지와 축소판의 rel과 src가 같고 클래스가 "활성"이지만 코드가 작동하지 않는다고 생각했습니다. 아무도 내가 뭘 잘못하고 있다고 말할 수 있습니까?

http://jsfiddle.net/XNsHC/8/

$(document).ready(function() { 
     $(".small_image").click(function() { 
      event.preventDefault(); 
      var image = $(this).prop("rel"); 
      $('#under').prop('src', image); 
      $('#above').fadeOut(600, function() { 
       $('#above').prop('src', $('#under').prop('src')).css('display', 'block'); 
      }); 
     }); 

     if($(".small_image").prop("rel") == $("#under").prop('src', image)){ 
      $(this).addClass('active'); 

     } 
    }); 

Answer 1

이 같은 시도 : (working jsFiddle를 - .active 주위 추가 빨간색 테두리)을 .CSS에 대한

$(".small_image").click(function() { 
    event.preventDefault(); 
    $('.small_image.active').removeClass('active'); // remove "active" from current image 
    $(this).addClass('active'); // add "active" to the new one 
    var image = $(this).prop("rel"); 
    $('#under').prop('src', image); 
    $('#above').fadeOut(300, function() { 
     $('#current_image #above').prop('src', $('#current_image #under').prop('src')); 
    }); 
}).eq(0).addClass('active'); // set the first one as "active" by default