全轻量级在我心中的定义就是只用引用一个js就可以完成相应功能的实现，不用再去为了响应式再去做各种css调试，一个js就可以实现各个不同分辨率下的适应。

在制作这款主题的时候，图片灯箱功能一直迟迟未增加进来，在挑选灯箱插件的时候，本地也测试了好几款灯箱。不过效果都差强人意。各种bug，然而我又是一个完美主义者，不找到一个很满意的灯箱，我是不会轻易加进主题里的，这也是为了以后可维护的方便性。小bug小改，大bug大改。真的是让人很烦恼的。何不一次性直接解决呢？

解决方案

百度了好久，终于找到了一个比较满意的灯箱-Zoom。只用加载相应js就可以实现。不过对于img图片属性来说，还得增加一个属性来调用起来。在每个img属性里加上data-action="zoom"就ok了。如果是在做企业站的话，直接在img里加入就好，但是对于wordpress来说，还得在functions.php文件里加入以下函数。

// 文章图片灯箱
    add_filter('the_content', 'mimelove_zoom');
    function mimelove_zoom ($content)
    { global $post;
        $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)/i";
        $replacement = '<img$1src=$2$3.$4$5 data-action="zoom" $6>';
        $content = preg_replace($pattern, $replacement, $content);
        return $content;
    }

Zoom灯箱js下载

下载地址 zoom.min.js（请不要直接使用本地址，请保存至你自己的js文件夹中并引用。）

具体Zoom灯箱如何使用请点击：https://mrju.cn/js-demo/zoomimg/ 并将源文件保存到本地，请查看源代码是如何使用zoom的。（demo中jQuery是用的谷歌cdn，查看图片没有效果的话，请科学上网。）

其他说明

灯箱，顾名思义就是查看图片更多详情，能够更详细的看到图片里的内容，一般由于主题布局的原因，图片无法展示出最大的尺寸。这款zoom灯箱功能只能说是“言简意赅”，还原灯箱最初的功能。原谅我的成语用的不规范。虽然跟别的灯箱来比的话，少了查看下一张上一张的功能，但是我觉得这些都是多余的，用户想看哪一张详图，直接点击图片就是了，其他功能都是附属品（相册功能还是蛮需要这个功能的，但是我不放相册到博客。毕竟是比较私人的东西。），对我来说都是多余的。不知道大家是怎么想的？