я вырезал кусок кода просто

Здравствуйте, можете ли подсказать по такому вопросу
Есть повторяющийся блок отображающий картинку
<picture>
    <source data-bp="full.webp" srcset="thum.webp" type="image/webp"/>
     <source data-bp="full.jpg" srcset="thum.jpg" type="image/jpeg"/>
      <img class="gallery" data-bp="full.jpg" src="thum.jpg" />
</picture>
И javascript который обходит эти элементы для отображения полноформатного изображения, код:
   <script>
     ;(function() {
       var imageLinks = document.querySelectorAll('#image_container > div > figure > picture > img.gallery__item-inner')
       for (var i = 0; i < imageLinks.length; i++) {
         imageLinks[i].addEventListener('click', function(e) {
           e.preventDefault()
           BigPicture({
             el: e.target,
             gallery: '#image_container',
             loop: true,
           })
         })
       }
     })()
   </script>
Проблема в том, что отображаются все ссылки и из тегов source, из-за этого изображения показываются по три раза...
Как это исправить?

это плохо?

querySelectorAll это ветка

забыл что откладка!

неясно можно их трогать или нет же

это кодпен , я там хоть пупа и лупа буду писать

на проде все гораздо хуже :D

Да, это ветка отфильтрованная по параметру.

ну так ветка же

и выдаст тебе ветки

а не елемент

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

Ооо как такое смотреть? Я еще очень зеленый, не понимаю как отладку производить.

это консоль в хроме

Спасибо, разберусь, направление понятно.

Выбирать только нужные

Что ты указал то он и выбрал