У меня есть вот такая максимально простая галерея:
$(".show-image").click(function() {
event.preventDefault();
var mainImage = $(this).index();
$('.images img').removeClass('active');
$('.images img').eq(mainImage).addClass('active');
});
.images img {display: none}
.images .active {display: block}
.thumbs {display: flex; margin-top: 5px;}
.thumbs .img-container {
margin-right: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center-side-grid">
<div class="img-container images">
<img src="http://dummyimage.com/154x60&text=1" alt="center-side__img" class="center-side__img active">
<img src="http://dummyimage.com/154x60&text=2" alt="center-side__img" class="center-side__img">
<img src="http://dummyimage.com/154x60&text=3" alt="center-side__img" class="center-side__img">
</div>
<div class="thumbs">
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=1" alt="center-side__img" class="center-side__img">
</div>
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=2" alt="center-side__img" class="center-side__img">
</div>
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=3" alt="center-side__img" class="center-side__img">
</div>
</div>
</div>
Но на моей странице мне нужно таких сразу несколько, однако при дублировании кода, jQuery удаляет класс "active" со всех блоков, а добавляет его только на самый первый на странице:
$(".show-image").click(function() {
event.preventDefault();
var mainImage = $(this).index();
$('.images img').removeClass('active');
$('.images img').eq(mainImage).addClass('active');
});
.images img {display: none}
.images .active {display: block}
.thumbs {display: flex; margin-top: 5px;}
.thumbs .img-container {
margin-right: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center-side-grid">
<div class="img-container images">
<img src="http://dummyimage.com/154x60&text=1" alt="center-side__img" class="center-side__img active">
<img src="http://dummyimage.com/154x60&text=2" alt="center-side__img" class="center-side__img">
<img src="http://dummyimage.com/154x60&text=3" alt="center-side__img" class="center-side__img">
</div>
<div class="thumbs">
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=1" alt="center-side__img" class="center-side__img">
</div>
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=2" alt="center-side__img" class="center-side__img">
</div>
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=3" alt="center-side__img" class="center-side__img">
</div>
</div>
</div>
<div class="center-side-grid">
<div class="img-container images">
<img src="http://dummyimage.com/154x60&text=1" alt="center-side__img" class="center-side__img active">
<img src="http://dummyimage.com/154x60&text=2" alt="center-side__img" class="center-side__img">
<img src="http://dummyimage.com/154x60&text=3" alt="center-side__img" class="center-side__img">
</div>
<div class="thumbs">
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=1" alt="center-side__img" class="center-side__img">
</div>
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=2" alt="center-side__img" class="center-side__img">
</div>
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=3" alt="center-side__img" class="center-side__img">
</div>
</div>
</div>
<div class="center-side-grid">
<div class="img-container images">
<img src="http://dummyimage.com/154x60&text=1" alt="center-side__img" class="center-side__img active">
<img src="http://dummyimage.com/154x60&text=2" alt="center-side__img" class="center-side__img">
<img src="http://dummyimage.com/154x60&text=3" alt="center-side__img" class="center-side__img">
</div>
<div class="thumbs">
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=1" alt="center-side__img" class="center-side__img">
</div>
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=2" alt="center-side__img" class="center-side__img">
</div>
<div class="img-container show-image">
<img src="http://dummyimage.com/50x50&text=3" alt="center-side__img" class="center-side__img">
</div>
</div>
</div>
Могу ли я как-то заставить работать этот скрипт внутри каждого контейнера отдельно? И если да, то как? Дублировать скрипты с разными классами не вариант...