0

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

3 回答 3

0

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

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

$('#popup-gallery2').magnificPopup....
于 2013-08-16T14:15:40.863 回答
0

您可以使用 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>
于 2015-06-19T13:30:02.290 回答
0

您可以简单地将jquery 的 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，它们都可以单独工作。

于 2019-10-18T10:18:31.243 回答