magnify.js

magnify.js 介绍

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

magnify.js特点 

lightBox模态窗口可以自由拖动，修改尺寸和全屏最大化。

可以使用鼠标来移动图片进行查看。

可以使用鼠标或功能按钮来缩放图片。

图片可以进行旋转。

支持键盘控制。

响应式设计。

magnify.js使用

1、引入

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

2、html

<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">

3、初始化

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

data-*属性说明：

data-src：该属性是大图的URL地址。 

data-caption：该属性用于显示图片的标题。 

data-group：该属性用于对图片进行分组。

网站地址:https://nzbin.github.io/magnify/

GitHub:https://github.com/nzbin/magnify

网站描述:一款jquery图片查看插件

magnify.js

官方网站：https://nzbin.github.io/magnify/