jQuery插件的多个实例（Magnific popup）答案

【问题标题】：Multiple instances of jQuery plugin (Magnific popup)jQuery插件的多个实例（Magnific popup）
【发布时间】：2013-08-16 14:12:08
【问题描述】：

这个我有点碰壁了。除了实现之外，我的 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');
                }
            }
        });
    });

【问题讨论】：

Please don't post links to your website

标签： javascript jquery wordpress

【解决方案1】：

尝试在你的 .popup-gallery div 上设置不同的 id_s 然后做

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

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

【讨论】：

感谢您如此快速的回复。然而，刚刚意识到我有点白痴，没有正确阅读文档......dimsemenov.com/plugins/magnific-popup/…。插件作者已经介绍了这一点，我只需要更改调用插件的脚本的前几行。

【解决方案2】：

您可以使用 jQuery 包含选择器来指向具有特定类名的“a”标签 - a[class*='popup-gallery-']。如果您的弹出窗口有不同的 ID，它只是一种魅力。它只是搜索类包含“popup-gallery-”的所有“a”。如果匹配，它会启动 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>

【讨论】：

【解决方案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，它们都可以单独工作。

【讨论】：