jq viewer 用法

js和css 下载地址：百度网盘链接：https://pan.baidu.com/s/1uigA0EVOLptxHOl38O567A
提取码：vpmn
复制这段内容后打开百度网盘手机App，操作更方便哦
基本：引进js css

我使用的是： jquery 版本
代码示例：

  <div id="jqhtml" class="imgDiv">
	   <div class="tpSHow" dat1a-original="${GLOB_HOME}/filedbserver/imgfl/5af02fed-9a94-47f4-93d0-66293e79dbce">
	   <img style="width:100%;height:100%;" " src="${GLOB_HOME}/filedbserver/imgfl/5af02fed-9a94-47f4-93d0-66293e79dbce">
	   </div> 
	 </div>

js代码：使用id创建view对象

$(document).ready(function(){
	reloadWiewer();
});
var VIEW;
function reloadWiewer(){
	VIEW= $('#jqhtml').viewer({
			 url:    'dat1a-original',
		});
}

动态加载：需要杀死初始化的或者更新 ，对象.viewer(‘关键字’) 它内置属性 函数等；例如：show，viewd，update，具体可查看一下源码

 var imghtml='<div class="tpSHow" dat1a-original="${GLOB_HOME}/filedbserver/imgfl/'+pid+'">'
            		 +'<img style="width:100%;height:100%;" " src="${GLOB_HOME}/filedbserver/imgfl/'+pid+'">'
            		 +'</div> ';
            	 $("#jqhtml").append(imghtml);
            	 //这里更新 viewer
            	 VIEW.viewer('update')

viewer.js将标签下的所有元素扩展了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 回调函数，具体查看演示