Magnific Popup 无法在页面上处理多个画廊

Question

我正在我正在构建的新网站上使用 magnific 弹出窗口，但我运行在同一页面上有多个画廊时遇到问题。

我正在使用 wordpress、Slick Slider 来显示一个充满缩略图的滑块，当单击其中一个缩略图时，它应该会在 Magnific Popup 中打开较大版本的图像。

我的 HTML 看起来像这样：

<div class="media-carousel slick-initialized slick-slider" id="carousel-links">
<div class="slick-list draggable" tabindex="0">
    <div class="slick-track" style="opacity: 1; width: 1152px; transform: translate3d(0px, 0px, 0px);">
        <div class="slick-slide slick-active" data-slick-index="0" style="width: 288px;">
            <div class="standard_media_element media_title">
                <a href="image1-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
                <img src="image1.jpg" alt="" class="standard-image"></a>
            </div>
        </div>
        <div class="slick-slide slick-active" data-slick-index="1" style="width: 288px;">
            <div class="standard_media_element media_title">
                <a href="image2-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
                <img src="image2.jpg" alt="" class="standard-image"></a>
            </div>
        </div>
        <div class="slick-slide slick-active" data-slick-index="2" style="width: 288px;">
            <div class="standard_media_element media_title">
                <a href="image3-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
                <img src="image3.jpg" alt="" class="standard-image"></a>
            </div>
        </div>
        <div class="slick-slide slick-active" data-slick-index="3" style="width: 288px;">
            <div class="standard_media_element media_title">
                <a href="image4-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
                <img src="image4.jpg" alt="" class="standard-image"></a>
            </div>
        </div>
    </div>
</div>

我有一个 site.js 文件，其中包含我网站的所有 javascript。我正在使用以下函数调用 magnific popup。我在其中添加了一些额外的东西来添加效果。

jQuery('#carousel-links').each(function() {
jQuery(this).magnificPopup({
    delegate: 'a',
    type: 'image',
    tClose: 'Close (Esc)',
    tLoading: '',
            preload: [1,4],
    gallery:{
        enabled:true,
        tPrev: 'previous',
        tNext: 'next',
        tCounter: '%curr% of %total%'
    },
    image: {
        verticalFit: true,
        titleSrc: function(item) {
        return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.src+'" target="_blank"><i class="fa fa-file-image-o"></i> open original</a>';
        }
    },
    closeBtnInside: false,
    closeOnContentClick: false,
    mainClass: 'mfp-zoom-in',
    removalDelay: 300, //delay removal by X to allow out-animation
    callbacks: {
        lazyLoad: function (item) {
            console.log(item); // Magnific Popup data object that should be loaded
        },
        beforeOpen: function() {
            jQuery('#carousel-links a').each(function(){
                jQuery(this).attr('title', $(this).find('img').attr('alt'));
            }); 
        },
        open: function() {
            //overwrite default prev + next function. Add timeout for css3 crossfade animation
            jQuery.magnificPopup.instance.next = function() {
                var self = this;
                self.wrap.removeClass('mfp-image-loaded');
                setTimeout(function() { jQuery.magnificPopup.proto.next.call(self); }, 120);
            }
            jQuery.magnificPopup.instance.prev = function() {
                var self = this;
                self.wrap.removeClass('mfp-image-loaded');
                setTimeout(function() { jQuery.magnificPopup.proto.prev.call(self); }, 120);
            }
        },
        imageLoadComplete: function() { 
            var self = this;
            setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16);
        }
    }
 });
 });

我有完全相同的 HTML 代码构建在同一页面上输出的不同画廊，出于某种原因，第一个带灯箱的旋转木马效果很好。但无论出于何种原因，第二个画廊不起作用。旋转木马工作正常，但 Magnific Popup 不会触发。当我单击其中一个缩略图时，它会在浏览器中打开较大的图像 window。

我通过在 .each 之后添加“console.log("clicked");”来测试我的 js 函数。我看到正在单击缩略图的控制台并且该部分正在工作。

知道如何让多个滑块在我的页面上工作吗？

我已经尝试了多个库文档中的示例，方法是从函数中删除所有内容并使其尽可能简单。我得到相同的结果，第一盏灯 window 工作，但第二盏灯不工作。

我也没有在控制台上看到任何 js 错误。

更新 #1 这不是一个理想的解决方案，但我确实找到了一种方法来完成这项工作。如果多个滑块在同一页面上使用相同的 ID 值，我必须在每个滑块上使用唯一的 ID 才能使灯箱工作。在这种情况下，我对所有滑块都使用了#carousel-links。我想你不能为所有滑块共享相同的 ID 并让这个灯箱工作？

我还把 javascript 代码移到了模块模板页面中轮播的后面。我暂时从我的 site.js 文件中删除了它。

我不是在寻找优化代码的方法，所以我可以将它放在我的 site.js 中。我将尝试通过在每个传送带上使用 class 来获取该 ID 值。如果我可以让它工作，我会报告。

更新 #2 - 我的天啊 当灯箱仅与灯箱的第一个实例一起使用时，我遇到的问题可能是因为我是一个 ID 而不是 CLASS 作为我的灯箱选择器吗？我更改为 CLASS，现在他们都在工作。

Answer 1

解决我的问题的方法是我将同一元素上的选择器从 ID 更改为 class。这使得同一页面上的多个画廊可以毫无问题地协同工作。

Magnific Popup 无法在页面上处理多个画廊

Magnific Popup fails to work with multiple galleries on a page

magnific-popup