Viewer.js的使⽤
两个版本的使⽤⽅式不完全相同；
1.2.0可以控制每⼀个按钮的显⽰、显⽰场景以及点击事件
toolbar
Type: Boolean or Number or Object
Default: true
Options:
0 or false: hide the toolbar.
1 or true: show the toolbar.
2: show the toolbar only when the screen width is greater than 768 pixels.
3: show the toolbar only when the screen width is greater than 992 pixels.
4: show the toolbar only when the screen width is greater than 1200 pixels.
{ key: Boolean | Number }: show or hide the toolbar.
{ key: String }: customize the size of the button.
{ key: Function }: customize the click handler of the button.
{ key: { show: Boolean | Number, size: String, click: Function }: customize each property of the button.
Available keys: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal" and "flipVertical".
Available sizes: "small", "medium" (default) and "large".
Specify the visibility and layout of the toolbar its buttons.
toolbar: {
zoomIn: 4,
zoomOut: 4,
oneToOne: 4,
reset: 4,
prev: 4,
play: {
show: 4,
size: 'large',
},
next: 4,
rotateLeft: 4,
rotateRight: 4,
flipHorizontal: 4,
flipVertical: 4,
}
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回调函数，具体查看演⽰
viewed函数null回调函数，具体查看演⽰
1.0.0版本：表格中列举的并不全⾯，具体可以到GitHub上查看源码， ⽐如container也是可以作为配置参数传⼊的，这个参数将会把
viewer展⽰到匹配的元素中：
我们通过上⾯代码可以看出，在iframe中调⽤全屏展⽰时只会在这个窗⼝展⽰；
另外还有⼀些函数可以调⽤，具体有哪些⽅法可以看源码中的methods⽅法；
调⽤⽅法例如：
1.0.0:
$(pictureDiv).viewer('destroy');
1.2.0:
viewer = new Viewer(pictureDiv,{
inline: true,
url: 'data-original',
navbar: false,
zoomRatio: 0.4,
button: true,
title: false,
keyboard: false,
jquery是什么有什么作用toolbar: {
zoomIn: 1,
zoomOut: 1,
oneToOne: 1,
reset: 1,
prev: 0,
play: 0,
next: 0,
rotateLeft: 1,
rotateRight: 1,
flipHorizontal: 1,
flipVertical: 1,
},
viewed: function () {
viewer.view(0);
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。