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