从幻灯片中排除同位素隐藏的项目答案

【问题标题】：Exclude isotope-hidden items from slideshow从幻灯片中排除同位素隐藏的项目
【发布时间】：2014-01-20 18:44:37
【问题描述】：

从另一个 7 个月前在 github 上问过这个问题的用户复制的问题，因为我有同样的问题，但在那里也没有找到解决方案 GitHub Question Link.

我在 wordpress 项目中使用 Magnific-Popup 和 isotope 来制作带有幻灯片和过滤器的画廊。当我用同位素过滤项目时，它会添加类isotope-hidden。但是，在幻灯片模式下，放大弹出窗口会忽略该类并显示所有项目。

我的弹出项目位于类 .portfolio-item 的 div 中，我正在使用以下代码进行放大弹出窗口

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

【问题讨论】：

你试过那里的答案吗？添加delegate: ':not(.isotope-hidden) a.item'
是的，我做到了，但它不起作用......我认为原因可能是在我们应用过滤器时添加了.isotope-hidden，但是到那时 magnific popup 已经列出了图像并且它停止显示整个灯箱。
你能准备一个带有样本的 jsfiddle 吗？

标签： jquery html wordpress magnific-popup

【解决方案1】：

尝试在 magnificPopup 初始化中定位同位素元素的容器，如下所示：

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

如果您为此使用内置的现成解决方案，这不起作用怎么办，例如这个：http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020 它已经使用 isotopeV2 和 Magnific Popup

【讨论】：

我在使用 TableSorter 过滤时遇到了类似的问题。我以('#tableID tbody') 为目标，然后使用选择器'a.item:visible' 翻阅其余过滤后的可见结果。

【解决方案2】：

我也遇到了同样的问题。阅读此处和 GitHub 上的一些建议让我尝试这样做：

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

在我的上下文中，它起作用了。当前的工作实验是here。

【讨论】：