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

原创 野人  2021-12-18 21:15  阅读 17 次

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

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

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

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

废话说多了,该说正事了,怎么把Viewer.js(图片查看器)集成到WordPress中呢?其实,大体的方法跟之前FancyBox(图片灯箱)基本上一致,不同的地方就是引入的cssjs用的是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

本文地址:http://www.yerenwz.com/5393.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论