javascript - 华丽的弹出式画廊 - 彼此隔离

Question

我显示了 3 个主要图像。我希望每个图像在单击时弹出其自己的个人画廊。如果每个画廊有 5 张图像，当单击主图像时，它应该显示 5 张中的 1 张，依此类推。当前，当单击每张主照片时，画廊弹出窗口显示 15 张图像中的 1 张 - 因此它包括所有 3 个画廊的所有图像。

<div class="row">
  <div class="gallery">
     <a href="img/gallery1/1.jpg" >
       <img src="img/MainImage1.jpg">
     <div class="caption">Gallery for image 1</div> </a>
       <a href="img/gallery1/2.jpg" ></a>
       <a href="img/gallery1/3.jpg" ></a>
       <a href="img/gallery1/4.jpg" ></a>
       <a href="img/gallery1/5.jpg" ></a>
           </div>
  <div class="gallery">
     <a href="img/gallery2/1.jpg" >
       <img src="img/MainImage2.jpg">
     <div class="caption">Gallery for image 2</div></a>
       <a href="img/gallery2/2.jpg" ></a>
       <a href="img/gallery2/3.jpg" ></a>
       <a href="img/gallery2/4.jpg" ></a>
       <a href="img/gallery2/5.jpg" ></a>
           </div>
  <div class="gallery">
     <a href="img/gallery3/1.jpg" >
       <img src="img/MainImage3.jpg">
     <div class="caption">Gallery for image 3</div></a>
       <a href="img/gallery3/2.jpg" ></a>
       <a href="img/gallery3/3.jpg" ></a>
       <a href="img/gallery3/4.jpg" ></a>
       <a href="img/gallery3/5.jpg" ></a>
           </div>

我的JS:

$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({        
delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
    }
});

我在文档中读到了这个:

Multiple galleries

To have multiple galleries on a page, you need to create a new instance of Magnific Popup for each separate gallery. For example

<div class="gallery">
    <a href="path-to-image.jpg">Open image 1 (gallery #1)</a>
    <a href="path-to-image.jpg">Open image 2 (gallery #1)</a>
</div>
<div class="gallery">
    <a href="path-to-image.jpg">Open image 1 (gallery #2)</a>
    <a href="path-to-image.jpg">Open image 2 (gallery #2)</a>
    <a href="http://vimeo.com/123123" class="mfp-iframe">Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.</a>
</div>

Js:

$('.gallery').each(function() { // the containers for all your galleries
    $(this).magnificPopup({
        delegate: 'a', // the selector for gallery item
        type: 'image',
        gallery: {
          enabled:true
        }
    });
});

但是我不清楚。你如何区分画廊？或者它应该知道从哪里自动拉取？

我需要调用一个“popup-gallery2”吗？然后我需要一个单独的 javascript 实例来控制 popup-gallery2 等吗？

还是我遗漏了什么？我要求的是使用这个插件的可能还是有更好的方法来完成这个？

感谢您阅读所有这些内容 - 我希望您清楚我要问的是什么。

Answer 1

问得好，这个问题有点棘手，因为关于多个画廊的文档没有那么深入。

它以这种方式对我有用:将每个画廊放在画廊链接 div 中。使用 jQuery find() 方法打开所选图库链接的子图库。然后为所有画廊初始化容器。请参阅下面的代码: HTML:

<div class="gallery-link">
    <a href="#gallery1"><img src="http://placehold.it/200x100/54c0c7?text=Gallery-1" alt="" /></a>
  <div id="gallery1" class="gallery">
    <a href="http://placehold.it/350x100/ceedef"></a>
    <a href="http://placehold.it/350x100/9ddbdf"></a>
    <a href="http://placehold.it/350x100/54c0c7"></a>
  </div>
</div>

<div class="gallery-link">
    <a href="#gallery2"><img src="http://placehold.it/200x100/fef65b?text=Gallery-2" alt="" /></a>
  <div id="gallery2" class="gallery">
    <a href="http://placehold.it/350x100/fef99c"></a>
    <a href="http://placehold.it/350x100/fef65b"></a>
    <a href="http://placehold.it/350x100/cbc448"></a>
  </div>
</div>

JavaScript:

$('.gallery-link').on('click', function () {
    $(this).find('.gallery').magnificPopup('open');
});

$('.gallery').each(function () {
    $(this).magnificPopup({
        delegate: 'a',
        type: 'image',
        gallery: {
            enabled: true
        }
    });
});

工作示例:https://codepen.io/pen/BRPJdw 祝你好运!