yzhanImageViewer是一个响应灵敏、移动友好、基于jQuery的图像查看器插件，使访问者能够以全屏模式查看所有分组的图像。

主要功能：

• [桌面]：导航箭头。
• [桌面和移动]：分页项目符号。
• [桌面和手机]：点击放大。
• [移动]：滑动以在图像之间导航。
• [移动]：捏一捏即可缩放。

如何使用它:

1.将mtfPicViewer插件的文件插入HTML页面。

<link rel="stylesheet" href="/path/to/dist/jquery.yzhanimageviewer.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.yzhanimageviewer.min.js"></script>

2.将一组图像添加到容器元素中。

<div class="example">
  <div>
    <img src="1.jpg" alt="Image 1">
    <img src="2.jpg" alt="Image 2">
    <img src="3.jpg" alt="Image 3">
  </div>
</div>

3.将插件连接到顶部容器并完成。

$('.example').yzhanImageViewer({
  selector: 'img',
  attrSelector: 'src',
  parentSelector: 'div'
});

4.将自定义CSS类附加到图像查看器中。

$('.example').mtfpicviewer({
  selector: 'img',
  attrSelector: 'src',
  parentSelector: 'div',
  className: 'pic-viewer'
});

5.自定义控件。

$('.example').mtfpicviewer({
  selector: 'img',
  attrSelector: 'src',
  parentSelector: 'div',
  controls: {
    reverseDrag: {
      x: false, 
      y: false
    },
    canChange: true
  },
});

6.回调函数。

$('.example').mtfpicviewer({
  onChange: function(curIndex, preIndex) {
    // do something
  },
  onOpen: function(curIndex) {
    // do something
  },
  onClose: function(curIndex) {
    // do something
  }
});

更新日志：

2022-08-18

• 错误修复
• 重命名为yzhanImageViewer

预览截图

移动第一个模式风格 图像查看器 jQuery yzhanImageViewe