照片擦除/显示照片流中来自不同GalleryID的所有图像

Question

我在实现Photoswipe jQuery插件时遇到问题。我建立了一个画廊，里面有12张图片，similar to this version on codepen。

我想在一页上创建三个画廊，为此，我复制了HTML代码/所有div，并将新ID分别重命名为#gallery1，#gallery2。

问题是，如果单击第二个画廊的第一个元素，则第一个画廊的第一个图片将显示（1/24），而不是第二个画廊的第一个图片（13/24）。

我不明白我在做什么错。这是代码段。

<div id="gallery" class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
  <!-- Use figure for a more semantic html -->
  <!-- 1 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <!-- Link to the big image, not mandatory, but usefull when there is no JS -->
    <a href="webfotos/landing1.jpg" data-caption="Sea side, south shore<br><em class='text-muted'>© Dominik Schröder</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <!-- Thumbnail -->
      <img src="webfotos/landing1.jpg" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 2 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=695" data-caption="Sunset in the wheat field<br><em class='text-muted'>© Jordan McQueen</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="webfotos/landing2.jpg" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 3 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=675" data-caption="Mysterious ocean<br><em class='text-muted'>© Barn Images</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="webfotos/landing6.jpg" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 4 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=651" data-caption="Cloud over the mountains<br><em class='text-muted'>© James Pritchett</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=651" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 5 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=584" data-caption="Icelandic horses<br><em class='text-muted'>© Bethany Legg</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=584" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 6 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=574" data-caption="Sea side, south shore<br><em class='text-muted'>© Julien Lavallée</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=574" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 7 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=551" data-caption="Sunset on the highland road<br><em class='text-muted'>© Forrest Cavale</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=551" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 8 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=509" data-caption="Seljalandsfoss waterfall<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=509" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 9 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=511" data-caption="Fjadrarglufur canyon, south shore<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=511" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 10 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=515" data-caption="Eerie wreckage of a crashed U.S. Navy aircraft<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=515" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 11 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=512" data-caption="Blue Lagoon<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=512" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 12 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=514" data-caption="Sunny Reykjavik street<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=514" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
</div>

现在是第二个画廊：

<div id="gallery1" class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
  <!-- Use figure for a more semantic html -->
  <!-- 1 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <!-- Link to the big image, not mandatory, but usefull when there is no JS -->
    <a href="https://unsplash.it/1200/900/?image=702" data-caption="Sea side, south shore<br><em class='text-muted'>© Dominik Schröder</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <!-- Thumbnail -->
      <img src="https://unsplash.it/1200/900/?image=702" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 2 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=695" data-caption="Sunset in the wheat field<br><em class='text-muted'>© Jordan McQueen</em>" data-width="1200" data-height="900" itemprop="contentUrl">
                                <img https://unsplash.it/1200/900/?image=695" itemprop="thumbnail" alt="Image description">
                            </a>
  </figure>
  <!-- 3 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=675" data-caption="Mysterious ocean<br><em class='text-muted'>© Barn Images</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/1200/900/?image=675" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 4 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=651" data-caption="Cloud over the mountains<br><em class='text-muted'>© James Pritchett</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=651" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 5 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=584" data-caption="Icelandic horses<br><em class='text-muted'>© Bethany Legg</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=584" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 6 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=574" data-caption="Sea side, south shore<br><em class='text-muted'>© Julien Lavallée</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=574" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 7 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=551" data-caption="Sunset on the highland road<br><em class='text-muted'>© Forrest Cavale</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=551" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 8 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=509" data-caption="Seljalandsfoss waterfall<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=509" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 9 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=511" data-caption="Fjadrarglufur canyon, south shore<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=511" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 10 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=515" data-caption="Eerie wreckage of a crashed U.S. Navy aircraft<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=515" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 11 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=512" data-caption="Blue Lagoon<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=512" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <!-- 12 -->
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=514" data-caption="Sunny Reykjavik street<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=514" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
</div>

现在，我将添加JavaScript，并尝试从#gallery和#gallery1中获取所有图像。

(function($) {

  // Init empty gallery array
  var container = [];

  // Loop over gallery items and push it to the array
  $('#gallery, #gallery1').find('figure').each(function() {
    var $link = $(this).find('a'),
      item = {

        src: $link.attr('href'),
        w: $link.data('width'),
        h: $link.data('height'),
        title: $link.data('caption')
      };
    container.push(item);
  });

  // Define click event on gallery item
  $('a').click(function(event) {

    // Prevent location change
    event.preventDefault();

    // Define object and gallery options
    var $pswp = $('.pswp')[0],
      options = {
        index: $(this).parent('figure').index(),
        bgOpacity: 0.85,
        showHideOpacity: true
      };

    // Initialize PhotoSwipe
    var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
    gallery.init();

  });

}(jQuery));

但是，如果单击13/24，我仍然会得到第一张照片（1/24）。我不明白JavaScript与顶部的CodePen示例相同，只是具有一个ID（#gallery1）。

试图使用类.gallery，但也不起作用。我不是JavaScript的天才，所以也许有人可以帮助我。我正在尝试整整两天。 非常感谢您的帮助！