给大家安利一个Viewer.js（图片查看器），内附WordPress集成教程哦。

在这篇《我调整了博客这几处的修改。》文章有简单的提到过Viewer.js（图片查看器），那么这篇文章的注重点就是它了，它了。

在没调整之前，我的博客使用的是FancyBox（图片灯箱），还写了一篇文章《原来我的站点有集成FancyBox图片灯箱啊，那就顺带升级美化了下。》

如果让我选择是否这两款插件，哪一款更好的话，我选择不出来，因为这两款插件各有各的有限，应对的场景也不同，举个列子，FancyBox（图片灯箱）还带有轮播图的功能，而Viewer.js（图片查看器）就没有，而它就是单纯用于图片查看的，所以它的功能都是与图片的有关的，这也就是我选择它的理由。

Viewer.js就跟它的插件名字一样，view就是有看，视图等的意思，所以就字面量的意思。

废话说多了，该说正事了，怎么把Viewer.js（图片查看器）集成到WordPress中呢？其实，大体的方法跟之前FancyBox（图片灯箱）基本上一致，不同的地方就是引入的css和js用的是Viewer.js（图片查看器）的就对了。

注意了，下面的代码不能完全copy到自己站点就能用了，因为引入的css和js路径不同，和调用的选择器不同，所以没有办法做到兼容，但是引入的方法大概就是这样子，所以下方的代码就适合我的博客

使用方法，复制以下的代码，到当前所使用主题根目录下的function.php文件?>之前，即可。

//加载viewerjs图片查看器
function viewerjs_scripts()
{
	wp_enqueue_style('viewerjs', get_template_directory_uri() . '/viewer.min.css', array(), '1.10.2');
	wp_enqueue_script('viewerjs', get_template_directory_uri() . '/js/viewer.min.js', array(), '1.10.2', false);
	wp_add_inline_script('viewerjs', '
		$(document).ready(function(){
			new Viewer($(".entry-content").get(0));
		});
	');
}
add_action('wp_enqueue_scripts', 'viewerjs_scripts');

关于这款Viewer.js（图片查看器）更多的用法，大家可以查看其仓库：https://github.com/fengyuanchen/viewerjs