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

  • 源码大小:30.53KB
  • 所需积分:1积分
  • 源码编号:19JP-3424
  • 浏览次数:877次
  • 最后更新:2023年06月11日
  • 所属栏目:幻灯片
本站默认解压密码:19jp.com 或 19jp_com

简介

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

主要功能:

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

如何使用它:

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

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

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

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

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

  1. $('.example').yzhanImageViewer({
  2. selector: 'img',
  3. attrSelector: 'src',
  4. parentSelector: 'div'
  5. });

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

  1. $('.example').mtfpicviewer({
  2. selector: 'img',
  3. attrSelector: 'src',
  4. parentSelector: 'div',
  5. className: 'pic-viewer'
  6. });

5.自定义控件。

  1. $('.example').mtfpicviewer({
  2. selector: 'img',
  3. attrSelector: 'src',
  4. parentSelector: 'div',
  5. controls: {
  6. reverseDrag: {
  7. x: false,
  8. y: false
  9. },
  10. canChange: true
  11. },
  12. });

6.回调函数。

  1. $('.example').mtfpicviewer({
  2. onChange: function(curIndex, preIndex) {
  3. // do something
  4. },
  5. onOpen: function(curIndex) {
  6. // do something
  7. },
  8. onClose: function(curIndex) {
  9. // do something
  10. }
  11. });

更新日志:

2022-08-18

  • 错误修复
  • 重命名为yzhanImageViewer

预览截图