如本站效果,手机页面也是OK的

本着能不用插件就不用插件的原则，尽量还是用代码实现功能。本文主要分享如何实现这种fancybox/lightbox灯箱效果，点击网站上所有图片都可以自动放大。

首先去fancybox网站下载文件包（http://fancyapps.com/fancybox/3/），或者去github：https://github.com/fancyapps/fancybox，下载下来后我们能用到的是dist文件夹下的jquery.fancybox.min.css和jquery.fancybox.min.js，把这两个文件引入到文章模板的头部，jquery.fancybox.min.js要在网站jQuery库下面，库jQuery 1.9.1+和jQuery 2+都可以，但首选还是jQuery3+，一般网站都有jQuery库，所以就不用引入示例中的jquery-3.2.1.min.js了。

这个灯箱库起效果的前提是给a标签加上data-fancybox=""，data-fancybox里面可以是images也可以是video，图片比如data-fancybox="images"，加上这个后就自动绑定和启动fancybox的click事件，但是大多数网站文章中的图片都没有包裹a标签，那么就需要解决两个问题：给img包裹上a标签，a标签里加上data-fancybox="images" href="图片地址"，下面是通用代码：

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

假设你的文章调用标签在容器.wenzhang里，那么文章里所有的图片都会包裹上a标签。我这个实现的只是低配的，也就是href地址跟图片地址是一样的，标准的是img标签里的图片是小图，href地址是小图地址对应的大图地址，这样的好处是点相册式预览，也就是点下图中圈出来的按钮

所以总结起来在需要加入这种效果的页面底部加入

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!--如果原页面已引入，可删除-->
<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js"></script><br>
<script><br />
$(function () {<br />
    $('.entry-content').find('img').each(function () {<br />
        var _this = $(this);<br />
        var _src = _this.attr("src");<br />
        _this.wrap('<a data-fancybox="images" href="' + _src + '"></a>');<br />
    })<br />
})<br />
</script>

.entry-content需要改成您IMG所在的容器

更深层次的使用大家可以去看文档：https://fancyapps.com/fancybox/3/docs/。