Получение класса для показа при нажатии элемента

Question

Я пытаюсь создать галерею с нуля, чтобы я мог узнать, как это делается. До сих пор мне удалось заставить мою галерею работать так, как мне хотелось бы, чтобы, когда эскиз активен, он должен иметь белый оверлей, и именно там у меня проблема.

Мои JS

$(".galImg").click(function() { 
    var image = $(this).attr("rel"); 
    $('#feature').html('<img src="' + image + '"/>'); 
}); 

Мой HTML

<div class="thumbnails"> 
    <a class="galImg active" rel="http://s25.postimg.org/keaisiflb/mini_brown_fairy.jpg" href="javascript:void(0)"> 
     <img src="http://s25.postimg.org/keaisiflb/mini_brown_fairy.jpg"> 
    </a> 
    <a class="galImg" rel="http://s25.postimg.org/xwhf4srqn/mini_blue_fairy.jpg" href="javascript:void(0)"> 
     <img src="http://s25.postimg.org/xwhf4srqn/mini_blue_fairy.jpg"> 
    </a> 
    <a class="galImg" rel="http://s25.postimg.org/smcgdi7hr/mini_purple_fairy.jpg" href="javascript:void(0)"> 
     <img src="http://s25.postimg.org/smcgdi7hr/mini_purple_fairy.jpg"> 
    </a> 
</div> 

<div id="feature" class="main-image"> 
    <img src="http://s25.postimg.org/keaisiflb/mini_brown_fairy.jpg"> 
</div> 

Мой CSS

.active{ 
    background-color: #ffffff; 
    opacity: 077; 
} 

А вот jsfiddle: JSFIDDLE

Answer 1

Использование removeClass и addClass:

$(".galImg").click(function() { 
    var image = $(this).attr("rel"); 
    $('#feature').html('<img src="' + image + '"/>'); 
    $('.galImg').removeClass('active'); 
    $(this).addClass('active'); 

}); 

DEMO

Answer 2

Попробуйте это: Вы должны использовать значение непрозрачности от 0 до 1, для создания слабых стоимостей вблизи 0. см ниже CSS

.active { 
    background-color: #ffffff; 
    opacity: 0.5; 
} 

И использовать ниже jQuery для применения и удаления active класс jQuery:

$(".galImg").click(function() { 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
    var image = $(this).attr("rel"); 
    $('#feature').html('<img src="' + image + '"/>'); 
}); 

DEMO

Answer 3

$(".galImg").click(function() { 
// first you remove all active class if theres some so you grab the parent 
var parent = $(this).parent, 
    image = $(this).attr("rel"); 
parent.children('.galImg").removeClass('active'); 
$(this).addClass('active'); 
var 
$('#feature').html('<img src="' + image + '"/>'); 

});

Answer 4

Для JS:

$(".galImg").click(function() { 
     var image = $(this).attr("rel"); 
     $('#feature').html('<img src="' + image + '"/>'); 
     $('.galImg').each(function(){ 
      $(this).removeClass('active'); 
     }); 
     $(this).addClass('active'); 
    }); 

Для CSS:

.active { 
    background-color: #ffffff; 
    opacity: 0.5; 
} 

.thumbnails img{ 
    width: 20%; 
}