一个页面上的多个图库无法工作。

Question

我正在使用镁基弹出在一个新的网站，我正在建设，但我遇到了一个问题，使它的工作，当多个画廊在同一页。

我使用wordpress，Slider来显示一个充满缩略图的滑块，当点击其中一个缩略图时，它应该在Magni显弹出中打开图像的更大版本。

我的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弹出窗口。我在里面加了一些额外的东西来增加效果。

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代码，构建不同的图库，在同一个页面上输出，出于某种原因，第一个带有lightbox的旋转木马工作得很好。但无论出于什么原因，第二座画廊都无法运作。旋转木马工作正常，但万能弹出弹出不开火。当我单击其中一个缩略图时，它会在浏览器窗口中打开较大的图像。

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

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

我已经尝试了多个库文档中的示例，方法是删除函数中的所有内容，并使其尽可能地成为barebone。我得到了同样的结果，第一个光影有效，但第二个没有。

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

更新#1 --这不是一个理想的解决方案，但我确实找到了一种方法来实现这个目标。我必须在每个滑块上使用唯一的ID，这样如果多个滑块在同一个页面上使用相同的ID值，就可以让lightbox工作。在本例中，我使用#carousel-链接的所有滑块。我想你不能在所有的滑块上共享相同的ID让这个灯箱工作吗？

我还将javascript代码移到模块模板页面中旋转木马之后。我暂时从我的site.js文件中删除了它。

我并不是在寻找一种优化代码的方法，这样我就可以将其放入我的site.js中。我将尝试在每个旋转木马上使用类来获取ID值。如果我能做到的话我会汇报的。

更新2-- OMG，当lightbox只使用lightbox的第一个实例时，我遇到的问题可能是因为我是一个ID，而不是作为照明盒选择器的类吗？我换了班，现在他们都在工作。

Answer 1

修复我的问题的是，我将选择器从ID更改为同一个元素上的一个类。这允许同一页面上的多个图库协同工作，没有问题。