Magnific Popup无法在页面上使用多个画廊

我正在建立的新网站上使用宏大的弹出窗口，但是当同一页面上有多个画廊时，我无法正常工作。

我使用的是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。我正在使用以下功能调用宏弹出式窗口。我在其中添加了一些额外的东西来添加效果。

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不会触发。当我单击其中一个缩略图时，它将在浏览器窗口中打开较大的图像。

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

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

我通过从函数中删除所有内容并使其尽可能成为准系统，尝试了针对多个画廊的文档中的示例。我得到相同的结果，第一个光窗有效，但第二个光窗无效。

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

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

我还将javascript代码移动到了模块模板页面中轮播之后。我现在从site.js文件中删除了它。

我不是在寻找一种优化代码的方法，因此可以将其放在我的site.js中。我将尝试通过在每个轮播中使用类来获取ID值。如果可以，我会报告。

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