Magnific-Popup Gallery 在一个标签中包含两个图像标签

Question

我正在使用 Magnific-Popup 制作画廊，但为了加快我的网站速度，我在标签内放置了两个不同的图像。一个用于大屏幕，另一个用于小屏幕。我正在使用引导类（hidden-lg hidden-md & hidden-sm hidden-xs）隐藏一个或另一个图像。

问题是当我点击 a 标签打开图片库时，Magnific-Popup 尝试打开隐藏的图片并返回“图片无法加载”。

<li>
  <figure>
    <div class="gallery-item">
      <a href="assets/upload/images/romantic/clem-onojeghuo-193397.jpg" title="" class="gallery-item">
        <img src="/assets/image-cache/romantic/clem-onojeghuo-193397.5ddf5942.jpg" alt="" class="hidden-lg hidden-md">
        <img src="/assets/image-cache/romantic/clem-onojeghuo-193397.36620614.jpg" alt="" class="hidden-sm hidden-xs">
        <div class="gallery-caption">
          <div class="centrize">
            <div class="v-center"><i class="hc-search"></i></div>
          </div>
        </div>
      </a>
    </div>
  </figure>
</li>

$('.gallery-item').magnificPopup({
  type: 'image',
  gallery:{
    enabled:true
  }
});

Answer 1

这是我自己的错误，因为我有两次“画廊项目”课程。一个在 div 标签上，另一个在 a 标签上。