jQuery圖片查看插件：Viewer.js
Viewer 是一款簡單的 jQuery 圖像瀏覽插件。
在線演示：http://fengyuanchen.github.io/viewer/
主要功能：
-
支持選項
-
支持方法
-
支持事件
-
支持觸摸
-
支持移動
-
支持縮放
-
支持旋轉
-
支持鍵盤
-
跨瀏覽器支持
使用：
<!-- a block container is required -->
<div>
<img class="image" src="picture.jpg" alt="Picture">
</div>
<div>
<ul class="images">
<li><img src="picture.jpg" alt="Picture"></li>
<li><img src="picture-2.jpg" alt="Picture 2"></li>
<li><img src="picture-3.jpg" alt="Picture 3"></li>
</ul>
</div> Keyboard support
Only available in modal mode.
- Esc: Exit full screen or stop play.
- ←: View the previous image.
- →: View the next image.
- ↑: Zoom in the image.
- ↓: Zoom out the image.
- Ctrl + 0: Zoom out to initial size.
- Ctrl + 1: Zoom in to natural size.
Options
You may set viewer options with$().viewer(options). If you want to change the global default options, You may use$.fn.viewer.setDefaults(options).
inline
- Type:Boolean
- Default:false
Enable inline mode.
button
- Type:Boolean
- Default:true
Show the button on the top-right of the viewer.
navbar
- Type:Boolean
- Default:true
Show the navbar.
title
- Type:Boolean
- Default:true
Show the title.
The title comes from thealtattribute of an image element or the image name parsed from URL.
toolbar
- Type:Boolean
- Default:true
Show the toolbar.
tooltip
- Type:Boolean
- Default:true
Show the tooltip with image ratio (percentage) when zoom in or zoom out
movable
- Type:Boolean
- Default:true
Enable to move the image.
zoomable
- Type:Boolean
- Default:true
Enable to zoom the image.
rotatable
- Type:Boolean
- Default:true
Enable to rotate the image.
scalable
- Type:Boolean
- Default:true
Enable to scale the image.
transition
- Type:Boolean
- Default:true
Enable CSS3 Transition for some special elements.
fullscreen
- Type:Boolean
- Default:true
Enable to request full screen when play.
Requires the browser supports Full Screen API.
keyboard
- Type:Boolean
- Default:true
Enable keyboard support.
interval
- Type:Number
- Default:5000
Define interval of each image when playing.
zoomRatio
- Type:Number
- Default:0.1
Define the ratio when zoom the image by wheeling mouse.
minZoomRatio
- Type:Number
- Default:0.01
Define the min ratio of the image when zoom out.
maxZoomRatio
- Type:Number
- Default:100
Define the max ratio of the image when zoom in.
zIndex
- Type:Number
- Default:2015
Define the CSSz-indexvalue of viewer in modal mode.
zIndexInline
- Type:Number
- Default:0
Define the CSSz-indexvalue of viewer in inline mode.
url
- Type:StringorFunction
- Default:'src'
Define where to get the original image URL for viewing.
If it is a string, it should be one of the attributes of each image element. If it is a function, it will be called on each image and should return a valid image URL.
build
- Type:Function
- Default:null
A shortcut of the "build.viewer" event.
built
- Type:Function
- Default:null
A shortcut of the "built.viewer" event.
show
- Type:Function
- Default:null
A shortcut of the "show.viewer" event.
shown
- Type:Function
- Default:null
A shortcut of the "shown.viewer" event.
hide
- Type:Function
- Default:null
A shortcut of the "hide.viewer" event.
hidden
- Type:Function
- Default:null
A shortcut of the "hidden.viewer" event.