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.'
    }
});

我在文档中已经读到了这个：

多个画廊

要在页面上拥有多个图库，您需要创建一个新图库每个单独的画廊的Magnific Popup实例。例如

<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
        }
    });
});

但这对我来说并不清楚。你如何区分画廊？或者它应该知道从哪里自动拉？

我是否需要拨打一个＆＃34; popup-gallery2＆＃34;？那么我是否需要一个单独的javascript实例来控制popup-gallery2等？

或者我有什么遗失的东西？是我要求使用此插件的可能性还是有更好的方法来实现这一目标？

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

Answer 1

好问题，这有点棘手，因为文档并没有深入到多个画廊。

它以这种方式为我工作：将每个图库放在gallery-link div中。使用jQuery find（）方法打开所选gallery-link的子库。然后初始化所有库的容器。见下面的代码： HTML：

# file not present in current directory
RewriteCond %{REQUEST_FILENAME} !-f
# file present in subdir/ directory
RewriteCond %{DOCUMENT_ROOT}/subdir/$0 -f
# rewrite to subdir/ directory
RewriteRule .+ subdir/$0 [L]

JavaScript的：

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

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

Magnific弹出式画廊 - 彼此隔离

多个画廊

1 个答案: