可缩放/可旋转/可缩放的jQuery全屏图像查看器插件

演示  website 下载

介绍

一个简单但功能齐全的jQuery图像查看器插件，它使在全屏模式弹出窗口中更轻松地查看，平移，缩放和旋转图像。

特征：
用鼠标滚轮放大/缩小图像。
用鼠标拖动平移图像。
使用箭头键，ADWSR键或自定义控件旋转图像。
支持本地和外部图像。

兼容的浏览器

Chrome，IE9 +，FireFox，Opera，Safari

使用方法

1.加载jQuery插件和ezoom.js插件文件。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/ezoom.js"></script>

2.加载font-awesome文件。

<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />

3. 将插件附加到图像并完成。

ezoom.onInit($('img'), {
  // options here
});

4. 也可以将外部图像加载到图像查看器中。

ezoom.onInit(domElement, {
  src: '/path/to/image'
});

5. 确定是否显示控件。

ezoom.onInit(domElement, {
  hideControlBtn: false
});

6. 事件处理程序。

ezoom.onInit(domElement, {
  onShow: function(){
    // do something
  },
  onClose: function(){
    // do something
  },
  onRotate: function(){
    // do something
  },
  onMoveStarted: function(){
    // do something
  },
  onMovedCompleted: function(){
    // do something
  },
  onMoving: function(){
    // do something
  },
});