前端图片查看预览插件Viewer.js使用方法记录总结

               前端图片查看预览插件Viewer.js使用方法记录总结

 

一、简介

Viewer JS 是一个前端的图片查看组件。支持图片放大、缩小，全屏、旋转、模态窗打开等功能。高效，简洁，易于学习使用。

二、下载

1.1、JS 版本：https://github.com/fengyuanchen/viewerjs

1.2、 JS 版本 Demo： https://fengyuanchen.github.io/viewerjs/

2.1、JQuery 版本： https://github.com/fengyuanchen/jquery-viewer

2.2、 JQuery 版本 Demo： https://fengyuanchen.github.io/jquery-viewer/

三、使用方法 --- 以JS版作示例

1、引入 viewer.js and viewer.css

<!--  include viewer.js and viewer.css -->
<link href="viewer.css" rel="stylesheet">
<script src="viewer.js" type="text/javascript"></script>
<style type="text/css">
	ul > li{
		cursor: zoom-in; 
	}
</style>

2、Html 代码

<div id="container">
    <ul>
         <li><img data-original="./images/tibet-1.jpg" src="./images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
        <li><img data-original="./images/tibet-2.jpg" src="./images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
         <li><img data-original="./images/tibet-3.jpg" src="./images/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
    </ul>
</div>

3、JS 代码

<script type="text/javascript">
	 window.addEventListener('DOMContentLoaded', function (){
		  var container = document.getElementById('container');
		  var viewr = new Viewer(container , {
				 url:'data-original',
				 fullscreen : false, // 不需要全屏
				 title : false, //不需要文件标题
		 });
	});	
</script>

4、实现效果如下：