以帝国CMS为例给个人博客加上图片灯箱fancybox

原理：将fancybox的js和css引入你个人博客需要开启灯箱的页面，一般是文章页面，同时给文章页面的img标签加上a标签，这样就完成了图片灯箱的部署。当然fancybox官网还有关于PDF，MP4等进阶的适配方法，喜欢摄影、网站需要开启图片灯箱的和喜欢折腾的个人博客站长可以行动起来了。
演示如下：

代码如下：

在内容模板头部加上

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>

 

在内容模板尾部加上

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

<script>
$(function () {
        $('.content').find('img').each(function () {
                var _this = $(this);
                var _src = _this.attr("src");
                var _alt = _this.attr("alt");
                _this.wrap('<a data-fancybox="images" href="' + _src + '" data-caption="' + _alt + '"></a>');
        })
})
</script>