БЛОГ НА HUSL


Скрипт галереи повторяющейся на странице

Автор вопроса: Alexandr

У меня есть вот такая максимально простая галерея:

$(".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>

Могу ли я как-то заставить работать этот скрипт внутри каждого контейнера отдельно? И если да, то как? Дублировать скрипты с разными классами не вариант...


Источник

Ответы (1 шт):

Автор решения: Sevastopol' 

$(".show-image").click(function() {
  event.preventDefault();
  var mainImage = $(this).index();
  $(this).parent('.thumbs').children(this).removeClass('active_a');
  $(this).parent('.thumbs').children(this).eq(mainImage).addClass('active_a');
  $(this).parent('.thumbs').prev('.images').children('img').removeClass('active');
  $(this).parent('.thumbs').prev('.images').children('img').eq(mainImage).addClass('active');
});
.center-side-grid {
  margin-bottom: 5px;
}
.images img {
  display: none
}

.images .active {
  display: block
}

.thumbs {
  display: flex;
  margin-top: 5px;
}

.thumbs .img-container {
  margin-right: 2px;
  width: 50px;
  height: 50px;
}

.active_a {
  border: 1px solid red;
}
<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>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.