БЛОГ НА HUSL


Как сделать несколько однотипных галерей на странице?

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

Есть код галереи :

    <div id="gallery" class="gallerytest">
  <div id="thumbs" class="thumbsimg">
    <div class="thumbsimgg">
      <img src="https://avatars.mds.yandex.net/get-zen_doc/241236/pub_5cee555a14255600afbfddc6_5cf7bbf79511bd00afb4eba1/scale_1200" alt="1234">
    </div>
    <div class="thumbsimgg">
      <img src="https://i.pinimg.com/originals/f5/bc/60/f5bc6033d75ec2db977bdf2bffcb6991.png" alt="1235">
    </div>
    <div class="thumbsimgg">
      <img src="https://upload.wikimedia.org/wikipedia/ru/9/99/Jerry_Mouse.jpg" alt="1236">
    </div>
    <div class="thumbsimgg">
      <img src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="1236">
    </div>
  </div>
  <div id="panel">
    <img id="largeImage" src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="123">
  </div>
</div>



  .gallerytest {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.thumbsimg {
  flex-direction: column;
}

.thumbsimgg img {
  width: 100px;
  height: 100px;
}


#thumbs {
  padding-top: 10px;
  overflow: hidden;
}

#thumbs img,
#largeImage {
  padding: 4px;
  cursor: pointer;
}

#largeImage {
  margin-left: 35px;
  margin-top: 30px;
  width: 300px;
  height: 300px;
}

#thumbs img {
  margin-right: 6px;
}



$('#thumbs').delegate('img', 'click', function() {
   $('#largeImage').attr('src', $(this).attr('src'));
 });

На одну галерею все работает прекрасно, но если попытаться вставить еще одну такую же галерею, js код на вторую не срабатывает. Что нужно поправить, чтобы js срабатывал на все однотипные галереи? Менял id на классы, срабатывает сразу на всех галереях. https://jsfiddle.net/bqg0uh6z/ ссылка на код с несколькими галереями.


Источник

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

Автор решения: Alex Sazonov

Я с вёрсткой не стал разбиратсья, но дело в том, что айдишник - уникальная штука. Ну и жквери обращается у тебя по айдишнику. В общем, вот так работает, только с вёрсткой разобраться надо. Во второй галерее изменил все айдишники, добавив 2 к имени

$('#thumbs').delegate('img', 'click', function() {
   $('#largeImage').attr('src', $(this).attr('src'));
 });
 
 $('#thumbs2').delegate('img', 'click', function() {
   $('#largeImage2').attr('src', $(this).attr('src'));
 });
  .gallerytest {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.thumbsimg {
  flex-direction: column;
}

.thumbsimgg img {
  width: 100px;
  height: 100px;
}


#thumbs {
  padding-top: 10px;
  overflow: hidden;
}
#thumbs2 {
  padding-top: 10px;
  overflow: hidden;
}

#thumbs img,
#largeImage,
#largeImage {
  padding: 4px;
  cursor: pointer;
}

#largeImage {
  margin-left: 35px;
  margin-top: 30px;
  width: 300px;
  height: 300px;
}

#largeImage2 {
  margin-left: 35px;
  margin-top: 30px;
  width: 300px;
  height: 300px;
}

#thumbs img {
  margin-right: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gallery" class="gallerytest">
  <div id="thumbs" class="thumbsimg">
    <div class="thumbsimgg">
      <img src="https://avatars.mds.yandex.net/get-zen_doc/241236/pub_5cee555a14255600afbfddc6_5cf7bbf79511bd00afb4eba1/scale_1200" alt="1234">
    </div>
    <div class="thumbsimgg">
      <img src="https://i.pinimg.com/originals/f5/bc/60/f5bc6033d75ec2db977bdf2bffcb6991.png" alt="1235">
    </div>
    <div class="thumbsimgg">
      <img src="https://upload.wikimedia.org/wikipedia/ru/9/99/Jerry_Mouse.jpg" alt="1236">
    </div>
    <div class="thumbsimgg">
      <img src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="1236">
    </div>
  </div>
  <div id="panel">
    <img id="largeImage2" src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="123">
  </div>
</div>

<div id="gallery2" class="gallerytest">
  <div id="thumbs2" class="thumbsimg">
    <div class="thumbsimgg">
      <img src="https://avatars.mds.yandex.net/get-zen_doc/241236/pub_5cee555a14255600afbfddc6_5cf7bbf79511bd00afb4eba1/scale_1200" alt="1234">
    </div>
    <div class="thumbsimgg">
      <img src="https://i.pinimg.com/originals/f5/bc/60/f5bc6033d75ec2db977bdf2bffcb6991.png" alt="1235">
    </div>
    <div class="thumbsimgg">
      <img src="https://upload.wikimedia.org/wikipedia/ru/9/99/Jerry_Mouse.jpg" alt="1236">
    </div>
    <div class="thumbsimgg">
      <img src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="1236">
    </div>
  </div>
  <div id="panel2">
    <img id="largeImage" src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="123">
  </div>
</div>

→ Ссылка
Автор решения: Alex Sazonov

Я в новый ответ это поместил, чтобы ты сравнил разницу. Обрати внимание на отсутствие айдишников вообще. И обрати внимание, как джаваскриптом я получил все ралереи. Это важно, потому что в цикле каждый проход создаётся ссылка на новый объект в доме, а не на один и тот же много раз. Теперь, сколько бы галерей не пришло, если они все будут иметь одинаковую структуру, то все будут работать. Как на чистом жквери сделать не знаю, не юзаю его. Но смысл, думаю, понятен.

[...document.querySelectorAll('.gallerytest')].forEach(elem => {
  let thumb = elem.children[0];
  let largeImg = elem.children[1].children[0];
  $(thumb).delegate('img', 'click', function() {
    $(largeImg).attr('src', $(this).attr('src'));
  });
})
.gallerytest {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.thumbsimg {
  flex-direction: column;
}

.thumbsimgg img {
  width: 100px;
  height: 100px;
}


.thumbs {
  padding-top: 10px;
  overflow: hidden;
}

.thumbs img,
.largeImage {
  padding: 4px;
  cursor: pointer;
}

.largeImage {
  margin-left: 35px;
  margin-top: 30px;
  width: 300px;
  height: 300px;
}

.thumbs img {
  margin-right: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="gallerytest">
  <div class="thumbsimg">
    <div class="thumbsimgg">
      <img src="https://avatars.mds.yandex.net/get-zen_doc/241236/pub_5cee555a14255600afbfddc6_5cf7bbf79511bd00afb4eba1/scale_1200" alt="1234">
    </div>
    <div class="thumbsimgg">
      <img src="https://i.pinimg.com/originals/f5/bc/60/f5bc6033d75ec2db977bdf2bffcb6991.png" alt="1235">
    </div>
    <div class="thumbsimgg">
      <img src="https://upload.wikimedia.org/wikipedia/ru/9/99/Jerry_Mouse.jpg" alt="1236">
    </div>
    <div class="thumbsimgg">
      <img src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="1236">
    </div>
  </div>
  <div class="panel">
    <img class="largeImage" src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="123">
  </div>
</div>

<div class="gallerytest">
  <div class="thumbsimg">
    <div class="thumbsimgg">
      <img src="https://avatars.mds.yandex.net/get-zen_doc/241236/pub_5cee555a14255600afbfddc6_5cf7bbf79511bd00afb4eba1/scale_1200" alt="1234">
    </div>
    <div class="thumbsimgg">
      <img src="https://i.pinimg.com/originals/f5/bc/60/f5bc6033d75ec2db977bdf2bffcb6991.png" alt="1235">
    </div>
    <div class="thumbsimgg">
      <img src="https://upload.wikimedia.org/wikipedia/ru/9/99/Jerry_Mouse.jpg" alt="1236">
    </div>
    <div class="thumbsimgg">
      <img src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="1236">
    </div>
  </div>
  <div class="panel">
    <img src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="123">
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.