当我将它与 Owl-carousel 一起使用时，Magnific-popup gallery 重复图像

Question

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

Owl-Carousel gallery

First popup

Duplicated Image

我的 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

我刚运行遇到这个问题，所以我想我会给你我的 answer/solution。

原因： 由于您使用 owl 旋转木马进行循环，因此 owl 旋转木马正在克隆项目。因为您克隆了轮播中的项目，所以您现在正在将副本输入弹出式画廊。多麻烦啊？有两个看似显而易见的解决方案。

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

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

解决方案 2：根据生成的元素创建对象数组，删除重复项，然后使用 magnific 的项属性设置图库项。

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

(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 本身，因为事实上，轮播中使用的可能是缩略图或等效物，而要在弹出窗口中打开的 "larger image" 较大的可能是单独的 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 的 "cloned" 图片问题，感谢@Chris Stage 提出这个问题。他的回答应该是 "Accepted Answer"，但我也很想为澄清点赞，这样我就可以赚取一些代表积分:)

Answer 3

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

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

更改您的选择器，使其不会用于具有 'owl-item cloned' class.

的元素的子元素

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
        }
    });

当我将它与 Owl-carousel 一起使用时，Magnific-popup gallery 重复图像

Magnific-popup gallery duplicate images when i use it with Owl-carousel

asp.net

magnific-popup

owl-carousel