jquery图片查看插件magnify.js_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

magnify.js是一款jquery图片查看插件。magnify.js插件以lightbox的方式来展示图片，并且lightbox窗口可以自由的拖动，图片可以缩放，旋转，最大化等，功能非常强大。该jquery图片查看插件的其它特点有：

lightbox模态窗口可以自由拖动，修改尺寸和全屏最大化。
可以使用鼠标来移动图片进行查看。
可以使用鼠标或功能按钮来缩放图片。
图片可以进行旋转。
支持键盘控制。
响应式设计。

使用方法

在页面中引入magnify.css，jquery和jquery.magnify.js文件。另外插件使用font-awesome字体图标作为界面的小图标。

<link href="/path/to/font-awesome.min.css" rel="stylesheet">                  
<link href="/path/to/magnify.css" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

初始化插件

该jquery图片查看器的默认HTML结构如下：

<a data-magnify="gallery" href="big-1.jpg">
  <img src="small-1.jpg">
</a>
<a data-magnify="gallery" href="big-2.jpg">
  <img src="small-2jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg">
  <img src="small-3.jpg">
</a>

或者：

<img data-magnify="gallery" data-src="big-1.jpg" src="small-1.jpg">
<img data-magnify="gallery" data-src="big-2.jpg" src="small-2.jpg">
<img data-magnify="gallery" data-src="big-3.jpg" src="small-3.jpg">

可用的data-*属性还有：

data-src：该属性是大图的url地址。
data-caption：该属性用于显示图片的标题。
data-group：该属性用于对图片进行分组。

初始化插件

如果你在HTML代码中添加了data-magnify属性，那么你不用编写任何的js初始化代码。

你也可以通过下面的js代码来手动初始化该jquery图片查看插件。

$("[data-magnify=gallery]").magnify();

配置参数

该jquery图片查看插件的可用配置参数有：

draggable：是否允许拖动lightbox模态窗口。默认值为：true。
resizable：是否允许修改lightbox模态窗口的大小。默认值为：true。
movable：是否允许图片进行拖动。默认值为：true。
keyboard：是否允许使用键盘来进行控制。默认值为：true。
- ←：前一张图片。
- →：下一张图片。
- +：图片放大。
- -：图片缩小。
- ctrl + alt + 0：图片的实际尺寸。
- ctrl + ,：向左旋转图片。
- ctrl + .：向右旋转图片。
title：是否显示图片的标题。默认值为：true。
fixedModalSize：如果为true，初始化是模态窗口的尺寸将跟随图片尺寸进行缩放。默认值为：false。
modalWidth：模态窗口的宽度。默认值为320。只有fixedModalSize选项为true时可用。
modalHeight：模态窗口的高度。默认值为320。只有fixedModalSize选项为true时可用。
gapThreshold：如果模态窗口大于浏览器窗口，会产生一个间隙。默认值为0.02。
ratioThreshold：图片是否的比例，默认值为0.01。
minRatio：显示图片的最小比例。默认值为0.1（10%）。
maxRatio：显示图片的最大比例。默认值为16（1600%）。
icons：图标的class类。
- fa fa-window-maximize：最大化。
- fa fa-close：关闭。
- fa fa-search-plus：放大。
- fa fa-search-minus：缩小。
- fa fa-arrow-left：前一张图片。
- fa fa-arrow-right：下一张图片。
- fa fa-photo：全屏。
- fa fa-arrows-alt：图片的实际尺寸。
- fa fa-rotate-left：向左旋转。
- fa fa-rotate-right：向右旋转。
toolbar：底部工具栏上显示的按钮。['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight']