关于前端JS图片查看器的选择和使用。

最近做的项目需要后台展示身份证照片。这个时候需要一个功能比较实用又不会太复杂的图片查看器了。经过几番抉择，终于选定了一个JQ插件——Magnify。

具体下载自己搜索。以下是使用方式.

简单引入这三个个文件。

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

 

模版上的使用方式。
 

<a data-magnify="gallery" href="big1.jpg">
  <img src="small1.jpg">
</a>
<a data-magnify="gallery" href="big2.jpg">
  <img src="small2.jpg">
</a>
<a data-magnify="gallery" href="big3.jpg">
  <img src="small3.jpg">
</a>

只要是带 data-magnify="gallery" 的链接包含的图片。就会自动加载。

 

也可以这样

<img data-magnify="gallery" data-src="big1.jpg" src="small1.jpg">
<img data-magnify="gallery" data-src="big2.jpg" src="small2.jpg">
<img data-magnify="gallery" data-src="big3.jpg" src="small3.jpg">

如果添加 data-magnify 的属性，插件会自动初始化

否则需要手动执行初始化代码

 

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

 接下来是效果图

 

简单实用的效果完成了。