给自己网站添加图片预览 大小缩放功能

网站没有图片放大预览功能,当自己在文章中插入大尺寸图片时,在网页看图片细节会看不清,这种情况要不右键保存图片到本地,要不复制图片链接在新窗口打开才能看到图片中细节。其实只需要小小的js插件即可实现图片预览效果。

今天介绍的插件Viewer.js,效果可尝试下图。点击图片预览,鼠标滚轮或键盘方向键上下可放大缩小,左右方向键可切换图片,ESC或点击X键退出预览,并且支持幻灯片播放。

给自己网站添加图片预览 大小缩放功能 第1张实现方法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/viewer.min.css">
		<script src="js/viewer.min.js"></script>
	</head>
	<body>
		<img src="./img/tibet-1.jpg" alt="图片1">
		<img src="./img/tibet-2.jpg" alt="图片2">
	</body>
	<script>
		// 这里选创建浏览对象所在范围的元素,body全通用:
		// 本页采用的是document.getElementsByClassName("article-content")[0])
		// 即根据文章内容class获取文章内容元素 然对其进行创建预览对象
		var viewer = new Viewer(document.body);
	</script>
</html>

其实也就是简单调用其js与css,然后利用new Viewer()调用即可。JQ版本调用为:

$('#id').viewer();

参数配置:

名称类型默认值说明
inline布尔值false启用 inline 模式
button布尔值true显示右上角关闭按钮(jQuery 版本无效)
navbar布尔值/整型true显示缩略图导航
title布尔值/整型true显示当前图片的标题(现实 alt 属性及图片尺寸)
toolbar布尔值/整型true显示工具
tooltip布尔值true显示缩放百分比
movable布尔值true图片是否可移动
zoomable布尔值true图片是否可缩放
rotatable布尔值true图片是否可旋转
scalable布尔值true图片是否可翻转
transition布尔值true使用 CSS3 过度
fullscreen布尔值true播放时是否全屏
keyboard布尔值true是否支持键盘
interval整型5000播放间隔,单位为毫秒
zoomRatio浮点型0.1鼠标滚动时的缩放比例
minZoomRatio浮点型0.01最小缩放比例
maxZoomRatio数字100最大缩放比例
zIndex数字2015设置图片查看器 modal 模式时的 z-index
zIndexInline数字0设置图片查看器 inline 模式时的 z-index
url字符串/函数src设置大图片的 url
build函数null回调函数,具体查看演示
built函数null回调函数,具体查看演示
show函数null回调函数,具体查看演示
shown函数null回调函数,具体查看演示
hide函数null回调函数,具体查看演示
hidden函数null回调函数,具体查看演示
view函数null回调函数,具体查看演示
viewed函数null回调函数,具体查看演示

配置也很简单,把参数配置写在new Viewer第二个参数中即可:

		new Viewer(document.body, {
			url: 'data-original',
			button: true,
			navbar: true
		});

下载:点击下载Viewer.js