Question

我开发了aspx页面在它上面我有使用猫头鹰旋转木马的图像厨房现在我添加了magnific-popup插件并使用了gallery选项然后我注意到当我点击旋转木马上的图像时它会成功弹出，但图像会重复（弹出内部）

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

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

我发现的一个问题是，在.each（）函数中，您必须将标签的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提出了这一解决方案。他的答案应该是“已接受的答案”，但我也很乐意为您作澄清，这样我就可以获得一些Rep积分：）

Answer 2

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

原因： 由于你使用猫头鹰旋转木马来循环，猫头鹰旋转木马是克隆物品。因为您克隆旋转木马中的项目，所以现在将重复项目添加到弹出库中。真麻烦吗？有两种看似明显的解决方案。

解决方案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 3

为了将来参考，这是一个非常简单的解决方案：

def even_till_n(number):
    return [x for x in range(number+1) if x%2 == 0]

更改选择器，使其不会被“ 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
        }
    });

当我使用Owl-carousel时，Magnific-popup gallery重复图像

4 个答案: