如何使用它（v2.x Vanilla JS）：

1.下载并加载文档中最新的ViewImage.js库。

<script src="view-image.js"></script>

2.初始化图像或图像链接上的ViewImage.js。就是这样。

• 查看图像：图像容器
• 无视图：排除此图像

<div id="example" view-image>
  <img src="1.jpg" alt="jQueryScript.Net" />
  <img src="2.jpg" alt="jQueryScript.Net" />
  <img src="3.jpg" alt="jQueryScript.Net" no-view />
  ...
</div>
 
<!-- OR -->
<div id="example" view-image>
  <a href="1.jpg">Image 1</a>
  <a href="2.jpg">Image 2</a>
  <a href="3.jpg" no-view />Image 3 (IGNORE)</a>
  ...
</div>

window.ViewImage && ViewImage.init('#example img, #example a');

3.或者使用查看图像显示方法

window.ViewImage && ViewImage.display(['1.jpg','2.jpg','3.jpg'], '1.jpg')

如何使用它（v1.x jQuery）：

1.在网页上同时包含jQuery库和jQuery ViewImage.js脚本。

<script src="//code.jquery.com/jquery.slim.min.js"></script>
<script src="view-image.js"></script>

2.将图像、图像链接甚至文本链接添加到网页中，如下所示：

<h2>Img</h2>
<img src="1.jpg">
 
<h2>Text Link</h2>
<a href="1.jpg">Click Me</a>
 
<h2>Image Link</h2>
<a href="1.jpg">
  <img src="thumb-1.jpg">
</a>

3.调用图像和链接上的函数。完成。

jQuery.viewImage({
  'target': 'img, a'
});

4.将插件设置为排除图像，如下所示：

jQuery.viewImage({
  'exclude': '.exclude',
});

5.以毫秒为单位设置转换延迟：

jQuery.viewImage({
  'delay': 300
});

更新日志：

2022-05-19

• v2.0.0:香草JavaScript版本

2020-08-05

• 更新view-image.js

预览截图

极简主义图像缩放和画廊灯箱插件 ViewImage.js