转载

JRollViewer：基于 JRoll 开发的图集查看器插件

JRollViewer

一款基于JRoll开发的图集查看器插件

注意!!!

必须 JRoll v2.4.x 以上
若 document.body 高度超出一屏，即当 document.body.scrollTop 不为0时会影响本插件的滚动效果。
请将 document.body 的css样式设为 overflow:hidden;height:100% ，超出内容使用JRoll进行滑动

Tips：html的height为100%时，body的高度才能占满全屏

引入

支持标签、CommonJS、AMD、CMD方式引入

AMD

define(['jroll', 'jroll-viewer'], function (JRoll, JRollViewer) {
  var viewer = new JRollViewer('#viewer'{
    JRoll: JRoll //不能确定引入顺序时可以参数形式将JRoll传给JRollViewer
  })
})

使用说明

<!-- 基本用法 -->
<div id="viewer">
  <img src="http://www.cdn.cn/1.png" jroll-viewer-image>
  <img src="../images/2.jpg" jroll-viewer-image>
  <img src="../images/3.gif">
</div>

<script>
var viewer = new JRollViewer('#viewer')
</script>

在 div#viewer 容器里存放 img 图片，图片必须带 jroll-viewer-image 标记
new JRollViewer('#viewer') 将 div#viewer 创建为JRollViewer实例容器
点击带 jroll-viewer-image 标记的图片即可打开图片查看器

选项

new JRollViewer(el [, options])

键名	默认值	说明
data	undefined	小图dataset的属性作为大图读取的图片路径，若不指定该选项，默认读取小图src
zoomMax	图片原始值	图片最大缩放倍数，以window.innerWidth为1
JRoll	window.JRoll	用于异步引入JRoll，不能确保window.JRoll比window.JRollViewer先加载完成时使用

例：

<div id="viewer">
  <img src="http://www.cdn.cn/1.png" data-big="http://www.cdn.cn/b1.png" jroll-viewer-image>
</div>

<script>
var viewer = new JRollViewer('#viewer', {
  data: 'big',
  zoomMax: 3,
  JRoll: window.JRoll
})
</script>

方法

show

// 打开第一张图片
viewer.show(0)

// or 打开src为`../images/2.jpg`的图片
viewer.show('../images/2.jpg')

// or 打开指定 img dom 的图片
viewer.show(document.getElementById('viewer').children[0])

一个参数，打开选中的图片