Question

我正在制作一个带有Magnific-Popup的画廊但是为了加快我的网站，我在一个标签里面有两个不同的图像。一个用于大屏幕，另一个用于小屏幕。我用bootstrap类隐藏了一个或另一个图像（hidden-lg hidden-md＆amp; hidden-sm hidden-xs）。

问题是当我点击一个标签打开图片库时，Magnific-Popup会尝试打开隐藏的图片并返回＆＃34;无法加载图片＆＃34;。

＆＃13;

<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>

＆＃13;

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

＆＃13;

Answer 1

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

Magnific-Popup Gallery在单个标签中有两个图像标签

1 个答案: