当我将它与 Owl-carousel 一起使用时，Magnific-popup 画廊会复制图像

Question

我已经在上面开发了 aspx 页面我现在有使用 owl-carousel 的图像厨房，当我添加 magnific-popup 插件并使用画廊选项然后我注意到当我点击 carousel 上的图像时它成功弹出但图像被复制（在弹出窗口内）

猫头鹰旋转木马画廊

第一个弹出窗口

重复图像

我的 aspx 代码：

<div class="owl-carousel">
  <asp:ListView runat="server" ID="lvDesrtProgramGallery" ItemType="SharedKernel.Core.Model.ProgramPhoto" SelectMethod="lvDesrtProgramGallery_GetData">
    <ItemTemplate>
      <div class="item">
        <a class="desert-safari-gallery" href="<%# Item.PhotoPath %>">
                  <img src="<%# Item.MediumPhotoPath %>" alt="" />
                            <div class="overlay">
                               <a href="#"><i class="fa fa-search-plus"></i>                                   </a>
      </div>
      </a>
</div>
</ItemTemplate>
</asp:ListView>
</div>

---

js代码

$('.desert-safari .owl-carousel').owlCarousel({
    items: 3,
    dots: false,
    nav: true,
    loop: true,
    margin: 10,
    autoplay: true,
    navText: ['<i class="fa fa-angle-left fa-4x"></i>', '<i class="fa fa-angle-right fa-4x"></i>'],
    onInitialized: callback,
    responsiveClass: true,
    responsive: {
        0: {
            items: 1,
            nav: false,
            margin: 80
        },
        570: {
            items: 1,
            nav: false
        },
        768: {
            items: 2,
            nav: false
        },
        992: {
            items: 3,
            nav: false,
        },
        1200: {
            items: 3,
            nav: true,
            loop: false
        }
    }
});
function callback(event) {
    $(".desert-safari-gallery").magnificPopup({
        type: "image",
        removalDelay: 160,
        loop: false,
        preloader: false,
        fixedContentPos: true,
        showCloseBtn: false,
        gallery: {
            enabled: true
        }
    })
}

Answer 1

我刚遇到这个问题，所以我想我会给你我的答案/解决方案。

原因：由于您使用 owl carousel 循环，因此 owl carousel 是克隆项目。 因为您克隆了轮播中的项目，所以您现在将重复项提供给弹出式画廊。 有什么麻烦吗？ 有两个看似显而易见的解决方案。

解决方案 1：不要使用 owl-carousel 的循环。

如果您想要轮播的循环功能，这可能不是首选解决方案，但这将不再导致弹出窗口接收重复条目。

解决方案 2：根据结果​​元素创建一个对象数组，删除重复项，然后使用 magnific 的 items 属性设置画廊项目。

这是我必须根据类似场景创建的工作脚本，我相信您可以剖析该过程是什么：

(function( $ ) {
            'use strict';

             $( window ).load(function(){

                 var GalleryItems = [];

                 $('.gallery img').each(function(i){

                     var src = $(this).attr('href');
                     var theSrc = { 
                        src: src,
                        type: 'image'
                      };
                     GalleryItems.push(theSrc);

                 });

                 var GalleryItems = GalleryItems.reduce(function(previous, current) {

                      var object = previous.filter(object => object.src === current.src);
                      if (object.length == 0) {
                        previous.push(current);
                      }
                      return previous;
                    }, []);

                 theGallery();

                 function theGallery(){
                     $('gallery').magnificPopup({
                        type: 'image',
                        gallery: {
                          enabled:true
                        },
                        items:GalleryItems,

                     });
                 }

             });

        })( jQuery );

Answer 2

我发现@Chris Stage 的答案非常有效，但是对于一些尝试逐字使用代码的 n00bs 可能会遇到问题。 我不能只是发表评论或接受答案，所以我发布了我的修订版，希望它能为其他人提供正确的代码。

我发现的一个问题是，在 .each() 函数中，您必须将标签的 URL 定位到更大的图像，而不是图像的 URL 本身，因为轮播中使用的 URL 可能是缩略图或等价物，在弹出窗口中打开的“较大图像”的较大的可能是一个单独的 URL。

(function( $ ) {
        'use strict';

         $( window ).load(function(){

             var GalleryItems = [];

             $('.photo-gallery .item a').each(function(i){ //Target your wrapping a tag

                 var src = $(this).attr('href');
                 var theSrc = { 
                    src: src,
                    type: 'image'
                  };
                 GalleryItems.push(theSrc);

             });

             var GalleryItems = GalleryItems.reduce(function(previous, current) {

                  var object = previous.filter(object => object.src === current.src);
                  if (object.length == 0) {
                    previous.push(current);
                  }
                  return previous;
                }, []);

             theGallery();

             function theGallery(){
                 $('.photo-gallery').magnificPopup({ //Target parent carousel container
                    type: 'image',
                    gallery: {
                      enabled:true
                    },
                    items:GalleryItems,
                    removalDelay: 300,
                    mainClass: 'mfp-fade' //Adds magnific's fade effect

                 });
             }

         });

    })( jQuery );

这个解决方案完美地解决了 Owl 的“克隆”图像问题，感谢@Chris Stage 提出这个问题。 他的答案应该是“接受的答案”，但我也很想为澄清点赞，这样我就可以获得一些代表点数:)

Answer 3

为了将来参考，这里有一个更简单的解决方案：

$('.owl-item:not(.cloned) * .desert-safari-gallery').magnificPopup(..

更改您的选择器，使其不会用于具有 'owl-item cloned' 类的元素的子元素。

Answer 4

你可以使用这个小修复。

$('.owl-carousel.with-mfp').each(function () {
    var $mfp = $(this);

    $mfp.on('click', '.owl-item.cloned a', function (event) {
        event.preventDefault();
        var self = $(this);

        // Dependency on image positions in owl and on unique a.href attrs
        $mfp.find('.owl-item:not(.cloned) a').each(function (index) {
            if ($(this).attr('href') === self.attr('href')) {
                $mfp.magnificPopup('open', index);
             }
        });
    });

    $mfp.magnificPopup({
        type: 'image',
        delegate: '.owl-item:not(.cloned) a',
        gallery: {
            enabled: true
        }
    });