Question

我在我正在建设的新网站上使用了大量的弹出窗口，但是当我在同一页面上的多个画廊时，我遇到了一个问题。

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

我通过添加＆＃34; console.log("clicked");＆＃34;来测试我的js功能。在.each之后。我看到控制台点击缩略图并且该部分正在工作。

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

我已经尝试了从多个图库的文档中删除所有功能并尽可能将其作为准系统的示例。我得到相同的结果，第一个灯窗口工作，但第二个没有。

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

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

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

我没有找到优化代码的方法，所以我可以把它放在我的site.js.我将尝试通过在每个轮播上使用该类来获取该ID值。我会报告我是否可以让它发挥作用。

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

Answer 1

解决了我的问题的原因是我将选择器从ID更改为同一元素上的类。这允许同一页面上的多个画廊一起工作，没有任何问题。

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

1 个答案: