jQuery图片查看插件:Viewer.js

jopen 6年前

Viewer 是一款简单的 jQuery 图像浏览插件。

在线演示:http://fengyuanchen.github.io/viewer/

jQuery图片查看插件:Viewer.js

主要功能:

  • 支持选项

  • 支持方法

  • 支持事件

  • 支持触摸

  • 支持移动

  • 支持缩放

  • 支持旋转

  • 支持键盘

  • 跨浏览器支持

使用:

<!-- 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.


项目主页:http://www.open-open.com/lib/view/home/1446775872795