Magnific-popup: Question: How can I exclude isotope-hidden items?

[ditikos]

I have used Magnific-Popup in conjunction with isotope. 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.

My popup items have the class: .portfolio-item I am using the following code for magnific popup:

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

if I use the $('.portfolio-item:not(.isotope-hidden)').[...] then it blocks the script completely and displays the image only (no js, just the image).

[dimsemenov]

Hello,

have you tried passing not() selector to delegate option?

[ditikos]

Hi,

.isotope-hidden is on the parent level to the a.item (which is used on my delegate). Should I put it like:

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

?

[dimsemenov]

Almost, just put a selector of a single item '.isotope-item:not(.isotope-hidden) a.item'

[nishant91-zz]

i have this same problem and this solution doesn't work as the .isotope-hidden class is added when we click on a filter and then the js stops working of magnific pop-up.
Any help ?

[dbo90]

You can also target only the visible items like this '.isotope-item:visible a.item'

[ghost]

i have tried too and it doesn't work in isotope v2
both .isotope-item or .isotope-hidden has been missing in isotope v2 :(

[nishant91-zz]

After posting here i contacted the person who posted this question to see if they found the answer & he was kind enough to share the solution with me i am sharing my jQuery file here you can use it by modifying according to your needs.

http://pastebin.com/wGseGydg

Hope this helps you & thank you @ditikos for sharing the solution :)

[abelq]

I found this solution thanks to http://www.andrealarosamultimedia.com/blog/isotope-filters-and-magnific-popup.

It adds .isotope-hidden to isotope v2.