Exclude isotope-hidden items from slideshow

5 Views

Question copied from another user who asked this 7 months ago on github as i have the same problem and no solution found there as well GitHub Question Link.

I have used Magnific-Popup in conjunction with isotope in a wordpress projects to make a gallery with slideshow and filters. When I filter the items with isotope, it adds the class isotope-hidden. But the magnific-popup disregards that class and displays all items also when in slideshow mode.

Read More

My popup items are in a div with class .portfolio-item I am using the following code for magnific popup 

 $('.image-link').magnificPopup({
            type: 'image',
            image: {
                titleSrc: 'alt',
                verticalFit: true
            },
            gallery:{
                enabled:true
            }              
        });
Post Views: 5

Related posts

Leave a Reply

2 comments

  1. try targeting the container of the isotope elements in the magnificPopup initialization, something like this:

    $('.container').magnificPopup({
    delegate: ':not(.isotope-hidden) a.item',
    type: 'image',
    image: {
        titleSrc: 'alt',
        verticalFit: true
    },
    gallery:{
        enabled:true
    }              
});

    it this doesn’t work what if you use a built in ready solution for this, for example this one: http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020 it uses isotopeV2 and Magnific Popup already

  2. I also had the same problem. Reading some of the suggestions here and on GitHub has lead me to try this:

    delegate: 'li:not(.isotope-hidden).item a'

    In my context, it worked. Current working experiment is here.