如何在Fancybox的ox_options['baseTpl']上方添加筛选选项

要给基于Modula的Fancybox灯箱添加筛选功能，你需要分步骤修改模板结构并编写交互逻辑：

1. 修改baseTpl插入筛选栏 #

在现有baseTpl的工具栏上方，新增筛选按钮容器。把以下代码插入到modula-fancybox-toolbar之前：

$fancybox_options['baseTpl'] = '<div class="modula-fancybox-container modula-lightbox-' . $settings['gallery_id'] . '" role="dialog" tabindex="-1">' .
                               '<div class="modula-fancybox-bg"></div>' .
                               '<div class="modula-fancybox-inner">' .
                               '<div class="modula-fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' .
                               // 新增筛选按钮容器
                               '<div class="modula-fancybox-filters">' .
                                   '<button class="filter-btn active" data-filter="all">全部</button>' .
                                   '<button class="filter-btn" data-filter="nature">自然风光</button>' .
                                   '<button class="filter-btn" data-filter="city">城市建筑</button>' .
                               '</div>' .
                               '<div class="modula-fancybox-toolbar">{{buttons}}</div>' .
                               '<div class="modula-fancybox-navigation">{{arrows}}</div>' .
                               '<div class="modula-fancybox-stage"></div>' .
                               '<div class="modula-fancybox-caption"><div class="modula-fancybox-caption__body"></div></div>' .
                               "</div>" .
                               "</div>";

注意：data-filter的值要和你给图片设置的分类标识一一对应。

2. 给图片添加分类属性 #

确保画廊里的图片元素，在初始化时对应的幻灯片上带有data-category属性，示例如下：

<a href="nature-1.jpg" data-fancybox="gallery" data-category="nature">
    <img src="nature-1-thumb.jpg" alt="自然风光">
</a>

3. 编写筛选交互逻辑 #

添加JavaScript代码，监听筛选按钮的点击事件，控制幻灯片的显示/隐藏：

document.addEventListener('DOMContentLoaded', function() {
    // 监听筛选按钮点击
    document.addEventListener('click', function(e) {
        if (!e.target.classList.contains('filter-btn')) return;
        
        e.preventDefault();
        // 切换按钮激活状态
        document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
        e.target.classList.add('active');
        
        const filterVal = e.target.getAttribute('data-filter');
        const slides = document.querySelectorAll('.modula-fancybox-stage [data-category]');
        
        slides.forEach(slide => {
            if (filterVal === 'all' || slide.getAttribute('data-category') === filterVal) {
                slide.style.display = 'block';
            } else {
                slide.style.display = 'none';
            }
        });
        
        // 跳转到第一个可见的幻灯片
        const firstVisible = document.querySelector('.modula-fancybox-stage [data-category]:not([style*="display: none"])');
        if (firstVisible) {
            Fancybox.getInstance().jumpTo(firstVisible);
        }
    });
});

4. 可选：美化筛选栏样式 #

添加CSS让筛选按钮更贴合灯箱风格：

.modula-fancybox-filters {
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.filter-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    padding: 6px 12px;
    margin: 0 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.filter-btn.active {
    background: rgba(255,255,255,0.3);
}

.filter-btn:hover {
    background: rgba(255,255,255,0.2);
}

内容的提问来源于stack exchange，提问作者Biman Dash