Question

我用这个打了一堵墙。我在实施之外的jQuery知识非常差。

我正在将Magnific Popup（http://dimsemenov.com/plugins/magnific-popup/）jQuery插件构建到我的WordPress主题中作为弹出库。我把它全部连接起来并正常工作。它使用自定义字段从后端动态抓取图像。我也可以在同一页面上运行多个实例。但是，当在一个弹出库中滚动图像时，它不会在第一个库的末尾结束，而是会移动到第二个库中的图像中。请参阅示例：http://www.oftenvisual.com/reset/galleries/。

不幸的是我不能在这里发布代码，因为它太长了，但希望演示页有所帮助。因为画廊是动态生成的，而使用后端的客户端不具备添加不同类的容器的知识，所以我需要一些方法来动态地分离出画廊。任何想法都非常感激！

调用插件的脚本

// Magnific

    $(document).ready(function() {
        $('.popup-gallery').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.',
                titleSrc: function(item) {
                    return item.el.attr('title');
                }
            }
        });
    });

Answer 1

尝试在.popup-gallery div上设置不同的id_s，然后执行

$('#popup-gallery1').magnificPopup....

$('#popup-gallery2').magnificPopup....

Answer 2

您可以使用jQuery contains selector指向具有特定类名的“a”标记 - a [class * ='popup-gallery - '] 。如果弹出窗口有不同的ID，它就可以作为一个魅力。它只搜索所有“a”，其中类包含“popup-gallery-”。如果它匹配，它会激活Magnific Pop Up等。

jQuery的：

$(document).ready(function(){
 $("a[class*='popup-gallery-']").magnificPopup({ 
        //your settings goes here
 });
});

HTML：

# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>

# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>

Answer 3

您可以简单地将jquery's each与相同的类一起使用，例如：

$('.popup-gallery').each(function() {
      $(this).magnificPopup({
        delegate: 'a', // child items selector, by clicking on it popup will open
        type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
        gallery: {enabled:true },
      });
});

现在，如果您有多个.popup-gallery div，则它们都可以单独工作。

多个jQuery插件实例（Magnific弹出窗口）

3 个答案: