原来我的站点有集成FancyBox图片灯箱啊，那就顺带升级美化了下。

前天写Zblog插件的介绍的时候，发现插入的图片不能放大/缩小看，这用户体验确实不太行，当时就默默把这事记下了。

因为本博客使用的主题，并不是自己写的，所以在这之前并不知道因为集成了FancyBox图片灯箱的插件，然后在实际折腾的过程中才发生原来早就安装了，只是因为我插入图片的方式不对导致FancyBox插件不能正常识别到，先给大家看下错误的示范。

  <img src="图片链接" />

正确的示范，a标签包裹着，然后再添加个data-fancybox="images"属性，作用就是让FancyBox识别到，其实这块的话，建议大家看下官方文档，写的都是很详细，反正就是要用这个插件，一定要根据它定义的规定走，这样才能跑的起来，用的起来。

<a href="图片链接" data-fancybox="images">
  <img src="图片链接" />
</a>

知道了是因为自己插入图片的方式错误后，就再去了解下FancyBox。发现人家已经升级到4.0.8的版本了，也就是最新版本了，而我的站点还在使用3.1.20，体验了下新版的FancyBox，发现展现的界面效果更好看了，而且插件的配置项也变多了，API更加的灵活，我自己本地搭建并成功体验了一番，真心不错，唯一不足的是，新版的体积变大了。

这里所说的体积，是FancyBox.css+FancyBox.js，也就是满足正常运行所必须的文件

旧版的体积：63KB

新版的体积：116KB

差了大概50KB吧，但是我是觉得牺牲点磁盘空间和流量，换来界面好看，功能多，这心情不错，值得，哈哈。

顺带给大家分享下，如果你也是使用WordPress的程序，也想用新版的FancyBox，但是之前并没有装过FancyBox的话，可以直接复制以下的代码到自己当前所使用的主题下面的function.php文件?>之前，代码如下；

//加载最新版的Fancybox v4.0.8，并将一些按钮配置提示中文化
function fancybox_scripts()
{
	wp_enqueue_style('fancybox', get_template_directory_uri() . '/fancybox.css', array(), '1.0');
	wp_enqueue_script( 'fancybox', get_template_directory_uri() . '/js/fancybox.umd.js', array(), '2.0', false);
	wp_add_inline_script('fancybox', '
		Fancybox.defaults.l10n.CLOSE = "关闭";
		Fancybox.defaults.l10n.DOWNLOAD = "下载";
		Fancybox.defaults.l10n.NEXT = "下一张";
		Fancybox.defaults.l10n.PREV = "上一张";
		Fancybox.defaults.l10n.TOGGLE_FULLSCREEN = "全屏模式";
		Fancybox.defaults.l10n.TOGGLE_SLIDESHOW = "幻灯片放映";
		Fancybox.defaults.l10n.TOGGLE_THUMBS = "缩略图";
		Fancybox.defaults.l10n.TOGGLE_ZOOM = "缩放";
	');
}
add_action('wp_enqueue_scripts', 'fancybox_scripts');

然后，因为上面的代码中有引入FancyBox，所以需要把引入的资源下载下面放到对应的目录，这样才可以正常运行，你需要下载的文件有；

fancybox.css（样式文件，放到自己当前所使用主题的根目录下）：https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css

fancybox.umd.js（插件主程序，放到自己当前所使用主题的根目录下的js文件夹下，如没有js文件夹就自行创建一个，放入即可）：https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js

如果配置成功的话，那么点击图片的话，就可以看到FancyBox的图片灯箱了。

当然了，对于已经有安装过FancyBox插件的朋友，无论是WordPress还是ZBlog，任意博客程序等等，只要找到自己程序中FancyBox插件的css样式和js文件所在位置后，直接把里面的内容替换成最新版的文件内容，这样也就是升级成功了，也就可以享受最新版的FancyBox功能和界面。

好了，说了那么多，大家可以直接点击上方的图片，看下我升级FancyBox后的实际效果。