网站通用使文章图片相册式预览、左右滑动、自动切换、双击手捏放大缩小的方法

站长朋友应该都注意到了，百度搜索资源平台的移动落地页检测以前是自动检测现在是工具，如果文章中的图片不支持全屏预览、放大缩小和左右滑动那么检测的结果是不符合移动落地页规范。

百度的要求是越来越多，但是哪个站长不是一边骂百度一边又在做seo，所以我们还是按照百度的要求整改，以求在移动互联网时代能获得更多的移动搜索流量。

这个方法来自懿古今的一篇文章：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一样，有利于搜索引擎对图片的收录。

2022年10月9日补充：fancybox3已停止更新，但不影响使用。今天升级到fancybox4，发现新增了全屏预览按钮，风景图片类网站可以沉浸式浏览，体验更佳；小图列表从右侧移到了下边，个人觉得这样不好，因为相比原来缩小了大图的展示区域；新增了循环浏览，在第一页点击“上一个”按钮或向右滑可浏览最后一张图片。

fancybox3的文档已经打不开了，如果你还是喜欢fancybox3的风格，相关css和js如下：