很多站长在“百度搜索资源平台”的移动落地页监测工具中发现部分有图片的页面，无法通过检测，提示：“该页面不符合移动落地页体验规范。”。具体的问题描述为：“您的页面可能存在图片不可全屏查看，全屏查看后不可缩放/左右滑动的问题，影响落地……”，本文将介绍如何解决这个问题，让网页符合百度的移动落地页体验规范。

百度移动搜索落地页体验规范是什么标准？

• 百度移动搜索落地页体验白皮书4.0 – 发布于2018年8月15日
• 百度APP移动搜索落地页体验白皮书5.0 – 发布于2020年3月19日

通过这两份白皮书文件，我们发现：

• 在白皮书4.0中明确规定：“详情页中主体内容包括图片的情况下，图片应能点击调起大图、缩小放大功能使用自如，手势支持顺滑，图集能自由切换。”
• 在白皮书5.0中也提到了：“详情页的主体内容在包含图片的情况下，图片应支持点击调起查看大图，点击返回，双指按捏放大缩小功能使用自如，在有多张图片的情况下，手势支持左右滑动，自由切换图片。”

其中规定的图片要掉起大图、放大、切换等，是在主体内容中，一般指的是文章页的正文部分，如下图：

如何实现页面主体内容中的图片调起查看大图、缩放、切换等功能

其实就是为主体内容中的图片增加一个灯箱效果即可，不过并不是所有的灯箱效果都能符合百度移动搜索落地页检测标准的，经过一番筛选测试，发现 fancybox 3 灯箱可以符合检测标准。Fancybox 3响应迅速、支持触摸且可自定义。

如果是WordPress网站，请跳过此处

为图片添加Fancybox 3灯箱

Fancybox 3 依赖于jQuery库，所以需要先在页面上引入jQuery的js文件（Wordpress默认自带 jQuery 1.12.x）。

引入jQuery的js文件可自行下载到本地，然后引入，或通过以下代码从CDN节点远程引入：

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>

接下来，下载Fancybox 3代码包：https://github.com/fancyapps/fancybox/archive/master.zip

解压后，将fancybox-master/dist/目录中的 jquery.fancybox.min.css 与 jquery.fancybox.min.js 两个文件，上传到网站 /fancybox3/ 目录中。

在需要引入 Fancybox 3 灯箱效果的网页中，加入以下代码：

<link rel="stylesheet" href="/fancybox3/jquery.fancybox.min.css" />
<script src="/fancybox3/jquery.fancybox.min.js"></script>

将需要加入 Fancybox 3 灯箱效果的图片<img>标签修改成如下形式：

<a href="图片.jpg" data-fancybox data-caption="单张图片的标题">
	<img src="缩略图.jpg" alt="" />
</a>

WordPress添加Fancybox 3灯箱效果

下载Fancybox 3代码包， 解压后，将fancybox-master/dist/目录中的 jquery.fancybox.min.css 与 jquery.fancybox.min.js 两个文件，上传到网站 /fancybox3/ 目录中。

再创建一个customize-fancybox3.js文件，上传到网站 /fancybox3/ 目录中，代码如下：

$(document).ready(function() {
   $("[data-fancybox]").fancybox({
	lang : 'zh',
	i18n : {
		'zh' : {
		CLOSE       : '关闭',
		NEXT        : '下一张',
		PREV        : '上一张',
		ERROR       : '请求的内容无法加载。 <br/>请稍后再试。',
		PLAY_START  : '开始播放幻灯片',
		PLAY_STOP   : '停止播放幻灯片',
		FULL_SCREEN : '全屏',
		THUMBS      : '缩略图',
		DOWNLOAD    : '下载',
		SHARE       : '分享',
		ZOOM        : '全屏'
		}
	},
	protect:true, // 禁用右键保存
   })
});

打开主题的functions.php文件，添加以下内容：

function fancybox_add_css_js() {
wp_register_script( 'fancybox-js','/fancybox3/jquery.fancybox.min.js', array('jquery'), '3.5.7', true );//注册fancybox 3 js
wp_register_script( 'customize-fancybox3','/inc/zzb_js/customize-fancybox3.js', array('fancybox-js'), '1.0', true );//注册自定义fancybox的js文件
if ( is_single() ){
	wp_enqueue_style( 'fancybox-css', '/fancybox3/jquery.fancybox.min.css', array(), '3.5.7', 'all' );//加载jquery.fancybox.min.css
	wp_enqueue_script( 'fancybox-js' );//引入jquery.fancybox.min.js
	wp_enqueue_script( 'customize-fancybox3' );//引入customize-fancybox3.js
	}
}
add_action( 'wp_enqueue_scripts', 'fancybox_add_css_js' );

// 图片添加 data-fancybox 属性
add_filter('the_content', 'fancybox3');
function fancybox3 ($content){
   global $post;
   $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|")(.*?)>(.*?)</a>/i";
   $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}

完成以上步骤之后，只需要在WordPress发表/编辑文章的时候，将图片链接到“媒体文件”即可看到灯箱效果。

移动落地页检测结果

实测页面URL： https://www.zhanzhangb.com/186.html （测试时间：2020年3月22日）

开启Fancybox 3灯箱效果之前：

开启Fancybox 3灯箱效果之后：