主题自带的图片灯箱翻来覆去改了好几次，总是不太满意。今天又尝试着优化了一下，结果差点把主题搞崩溃，看来是时候放弃这个灯箱了。

久闻 fancybox 灯箱大名，也在好几个博客上体验过这个灯箱插件。确实，fancybox 无论在 PC 端还是在移动端功能都非常的强大。目前测试下来并没发现什么问题，现将实现方法简单记录如下（代码只适用于该主题，其它主题仅作参考）：

1.在主题 functions.php 文件中挂载 fancybox 的 css 和 js 文件：

展开复制
if ( get_theme_mod( 'biji_setting_view_image', true ) ) {
    wp_enqueue_style( 'fancybox', 'https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/fancyapps-ui/5.0.28/fancybox/fancybox.min.css', [], THEME_VERSION );
    wp_enqueue_script( 'fancybox', 'https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/fancyapps-ui/5.0.28/fancybox/fancybox.umd.min.js', [], THEME_VERSION, false );
}

2.将主题 footer.php 如下代码：

展开复制
<?php }  if (get_theme_mod( 'biji_setting_view_image', true )) { ?>
window.ViewImage && ViewImage.init();

修改为：

展开复制
<?php }  if (get_theme_mod( 'biji_setting_view_image', true )) { ?>
if (typeof Fancybox !== 'undefined') {
    Fancybox.bind("[view-image] img:not([no-view])", {
        groupAll: true,
        hideScrollbar: false,
        on: {
            load: (fancybox, slide) => {
                const img = slide.triggerEl;
                const title = img.alt || img.title || '';
                if (title) {
                    slide.caption = title;
                }
            },
            close: (fancybox) => {
                document.activeElement.blur();
                document.body.focus();
            },
            destroy: (fancybox) => {
                document.activeElement.blur();
                document.body.focus();
            }
        }
    });
}

3.将主题 modules.js 文件中的如下代码：

展开复制
handleViewImage(url) {
    window.ViewImage && ViewImage.display(this.note.images.map(({ source_url }) => source_url), url);
}

修改为：

展开复制
handleViewImage(url) {
    if (typeof Fancybox !== 'undefined') {
        Fancybox.show(
            this.note.images.map(({ source_url }) => ({
                src: source_url,
                type: 'image'
            })),
            {
                startIndex: this.note.images.findIndex(img => img.source_url === url),
                hideScrollbar: false,
                on: {
                    close: (fancybox) => {
                        document.activeElement.blur();
                        document.body.focus();
                    },
                    destroy: (fancybox) => {
                        document.activeElement.blur();
                        document.body.focus();
                    }
                }
            }
        );
    }
}

4.删除主题 package.js 文件中的 ViewImage.min.js 代码。