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

Question

i have developed aspx page on it i have image galley using owl-carousel now when i added magnific-popup plugin and used gallery option then i noticed when i click on image on carousel it get popup successfully but images get duplicated (inside popup)

Owl-Carousel gallery

First popup

Duplicated Image

my aspx code :

<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 code

$('.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

I just ran into this problem so I thought I'd give you my answer/solution.

The Reason: Since your using owl carousel to loop, owl carousel is cloning items. Because your cloning the items within your carousel you're now feeding duplicates into the popup gallery. What a hassle right? There are two seemingly obvious solutions.

Solution 1: Don't use owl-carousel's loop.

This may not be the preferred solution if you want the looping feature of your carousel but this will no longer cause the popup to receive duplicate entries.

Solution 2: Create an array of objects based on the resulting elements, remove the duplicates, then use magnific's items property to set the gallery items.

Here is a working script I had to create based off a similar scenario I'm sure you can dissect what the process is:

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