帝国cms网站文章图片相册式预览、左右滑动、自动切换、双击手捏放大缩小的实现方法

这个方法来自懿古今的一篇文章：https://www.yigujin.cn/1301.html，但是他的网站是WordPress，本文要说的方法适合所有网站。

首先去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地址是小图地址对应的大图地址，这样的好处是点相册式预览，也就是点下图中圈出来的按钮

右边的缩略图看着比较美观，如果href地址跟img标签的src地址一样，那么右边的缩略图只截取大图缩小后的一部分，风景图片看起来还好，因为风景图片在拍摄时会突出主体，如果是普通文章的截图看起来就很差劲了，因为没有中心点，截取后图片是残缺的。

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

2019年6月19日补充：在查看官方示例时发现预览图片底部有文字说明，这是因为a标签加上了data-caption，我们可以获取图片alt属性的值然后赋给data-caption，上面的代码简单修改下就可以实现

$(function () {$('.wenzhang').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>');})})

2019年7月3日补充：加上

$(this).attr('title','' + _alt + '');

给图片加上title标签，title的内容跟alt一样，有利于搜索引擎对图片的收录。