javascript 强大的弹出式图库-彼此隔离

5anewei6 于 2023-02-11 发布在 Java

关注(0)|答案(2)|浏览(148)

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

我在文档中读到了这一点：

多个画廊

要在一个页面上拥有多个库，需要为每个库创建一个新的放大弹出窗口示例。

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

日本：

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

但这一点我不太清楚。你如何区分画廊？或者它应该知道从哪里自动拉？
我需要调用一个“popup-gallery 2”吗？然后我需要一个单独的javascript示例来控制popup-gallery 2等等吗？
或者是有什么我错过了吗？是我所要求的可能使用这个插件或有一个更好的方式来完成这一点？
感谢您阅读所有这些-我希望它是明确的我在问什么。

JavaScript

来源：https://stackoverflow.com/questions/41528224/magnific-popup-galleries-isolate-from-each-other

2条答案

按热度按时间

juzqafwq1#

问得好，这是一个有点棘手的问题，因为文档在多个图库中没有那么深入。
我是这么想的：将每个图库放入gallery-link div中，使用jQuery find（）方法打开所选图库链接的子图库，然后初始化所有图库的容器，见以下代码：超文本：

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

工作示例：祝你好运!

赞(0）回复(0）举报 2023-02-11

kb5ga3dv2#

我的工作也遇到了同样的问题。下面是工作正常的答案。

<div class="caption jsPop-1">
       Gallery for image 1
       <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="caption jsPop-2">
       Gallery for image 2
       <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>

$(function(){
    $('[class*="jsPop-"]').each(function(){
        $(this).magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
                enabled:true
            }
        });
    });
});

只要使每个画廊容器是唯一的，然后选择类和应用弹出窗口。

赞(0）回复(0）举报 2023-02-11

我来回答

javascript 强大的弹出式图库-彼此隔离

多个画廊

2条答案

相关问题

热门标签

最新问答