基于JQUERY 的图片查看插件

<!--单张图片-->
<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>  

在模态窗口模式下，可以使用键盘来控制查看图片： 
Esc：退出全屏并停止播放。 
←：查看前一张图片。 
→：查看下一张图片。 
↑：放大图片。 
↓：缩小图片。 
Ctrl + 0：缩小到初始大小。 
Ctrl + 1：放大到自然尺寸。

你可以通过$().viewer(options)来设置这个图片查看器的参数。如果你要修改全局配置参数，你需要使用$.fn.viewer.setDefaults(options)。 
inline：类型：Boolean，默认值：false。使用内联模式来查看图片。 
button：类型：Boolean，默认值：true。在图片查看器的右上角显示按钮。 
navbar：类型：Boolean，默认值：true。显示导航条。 
title：类型：Boolean，默认值：true。显示图片标题。标题来自图片的alt属性或从URL解析的图片名称。 
toolbar：类型：Boolean，默认值：true。显示工具栏。 
tooltip：类型：Boolean，默认值：true。在放大缩小图片的时候显示图片的百分比比例。 
movable：类型：Boolean，默认值：true。图片是否可以移动。 
zoomable：类型：Boolean，默认值：true。图片是否可以放大缩小。 
rotatable：类型：Boolean，默认值：true。图片是否可以旋转。 
scalable：类型：Boolean，默认值：true。图片是否可以翻转。 
transition：类型：Boolean，默认值：true。是否为某些指定的元素使用CSS3 Transition效果。 
fullscreen：类型：Boolean，默认值：true。是否允许全屏模式。该功能需要浏览器支持Full Screen API。 
keyboard：类型：Boolean，默认值：true。是否可以使用键盘控制。 
interval：类型：Number，默认值：5000。自动播放时图片的切换时间间隔。 
zoomRatio：类型：Number，默认值：0.1。在使用鼠标缩放图片时的缩放比例。 
minZoomRatio：类型：Number，默认值：0.01。图片缩小的最小比例。 
maxZoomRatio：类型：Number，默认值：100。图片放大的最小比例。 
zIndex：类型：Number，默认值：2015。定义图片查看器模态窗口的CSS z-index属性的值。 
zIndexInline：类型：Number，默认值：0。定义图片查看器在内联模式中CSS z-index属性的值。 
url：类型：String 或 Function，默认值：‘src‘。定义原始图片的URL地址。 
build：类型：Function，默认值：null。"build.viewer"事件的快捷方式。 
built：类型：Function，默认值：null。"built.viewer"事件的快捷方式。 
show：类型：Function，默认值：null。"show.viewer"事件的快捷方式。 
shown：类型：Function，默认值：null。"shown.viewer"事件的快捷方式。 
hide：类型：Function，默认值：null。"hide.viewer"事件的快捷方式。 
hidden：类型：Function，默认值：null。"hidden.viewer"事件的快捷方式。 

// Modal mode
$().viewer({
  shown: function () {
    $().viewer(‘method‘, argument1, , argument2, ..., argumentN);
  }
}
 
// Inline mode
$().viewer({
  built: function () {
    $().viewer(‘method‘, argument1, , argument2, ..., argumentN);
  }
}