Как выбрать нужные элементы с помощью querySelectorAll?

Question

[Алексей Андреев]

Использую скрипт https://github.com/henrygd/bigpicture для увеличения изображения.
Есть список изображений в виде:

<div id="image_container" class="row">
  <div class="col-12 col-xs-6 col-md-4 col-lg-3 col-xl-auto mb-4">
        <figure itemscope itemtype="http://schema.org/ImageObject" style="cursor:zoom-in;">
        <picture>
          <source data-bp="/img/portfolio/naklejki03_full.webp" srcset="/img/portfolio/naklejki03_thum.webp" type="image/webp" >
          <source data-bp="/img/portfolio/naklejki03_full.jpg" srcset="/img/portfolio/naklejki03_thum.jpg" type="image/jpeg" >
          <img class="gallery__item-inner" data-bp="/img/portfolio/naklejki03_full.jpg" src="/img/portfolio/naklejki03_thum.jpg" alt=""  data-caption=""/>
        </picture>
        <link itemprop="url" href="/img/portfolio/naklejki03_thum.webp" />
      </figure>
    </div>
  <div class="col-12 col-xs-6 col-md-4 col-lg-3 col-xl-auto mb-4">
        <figure itemscope itemtype="http://schema.org/ImageObject" style="cursor:zoom-in;">
        <picture>
          <source data-bp="/img/portfolio/naklejki17_full.webp" srcset="/img/portfolio/naklejki17_thum.webp" type="image/webp" >
          <source data-bp="/img/portfolio/naklejki17_full.jpg" srcset="/img/portfolio/naklejki17_thum.jpg" type="image/jpeg" >
          <img class="gallery__item-inner" data-bp="/img/portfolio/naklejki17_full.jpg" src="/img/portfolio/naklejki17_thum.jpg" alt=""  data-caption=""/>
        </picture>
        <link itemprop="url" href="/img/portfolio/naklejki17_thum.webp" />
      </figure>
    </div>
</div>

Запускается скрипт так:

<script>
			;(function() {
				var imageLinks = document.querySelectorAll('#image_container img')
				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,
						})
					})
				}
			})()

Все нормально отрабатывает увеличивает изображения, НО показывает по три одного и того же изображения, т.е. выбирает ссылки не только из тега img но и из source. Как бы сохранив использвание webp подправить вызов этого скрипта, но чтобы не "индексировались" все три ссылки на фотографии.

Answer 1

[Alex]

Прямо там, в README показано как

<div id="image_container">
	<img src="photo1_thumb.jpg" data-bp="photo1.jpg" class="example" />
	<img src="photo2_thumb.jpg" data-bp="photo2.jpg" />
	<img src="photo3_thumb.jpg" data-bp="photo3.jpg" class="example" />
</div>

// opens gallery w/ the two images matching the selector
BigPicture({
	el: e.target,
	gallery: document.querySelectorAll('#image_container .example'),
})

Comments

[Алексей Андреев]

И так пробовал - вообще не срабатывает

<script>
			;(function() {
						BigPicture({
							el: e.target,
							gallery: document.querySelectorAll('#image_container .gallery__item-inner'),
              loop: true,
						})
			})()
		</script>

И так - все равно по три изображения выдает.

<script>
			;(function() {
				var imageLinks = document.querySelectorAll('#image_container .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>