Magnific Popup 无法与页面上的多个画廊一起使用

Posted 2023-05-07

【中文标题】Magnific Popup 无法与页面上的多个画廊一起使用

【英文标题】：Magnific Popup fails to work with multiple galleries on a page

【发布时间】：2015-05-17 05:38:23

【问题描述】：

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

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

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

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

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

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

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

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

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

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

【参考方案1】：

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

【讨论】：

我很惊讶没有人跳上这个来帮助你。感谢您发布您的答案。