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']

该jquery图片查看插件的github地址为：https://github.com/nzbin/magnify