Viewer.js 图片预览插件使用
2023-09-27 14:24:12 时间
一、简介
Viewer.js 是一款强大的图片查看器。
Viewer.js 有以下特点:
- 支持移动设备触摸事件
- 支持响应式
- 支持放大/缩小
- 支持旋转(类似微博的图片旋转)
- 支持水平/垂直翻转
- 支持图片移动
- 支持键盘
- 支持全屏幻灯片模式(可做屏保)
- 支持缩略图
- 支持标题显示
- 支持多种自定义事件
Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用。
二、下载
纯JS版本:https://github.com/fengyuanchen/viewerjs
jQuery 版本:https://github.com/fengyuanchen/jquery-viewer
三、使用方法
1、直接引入文件
Javascript版:
<link rel="stylesheet" href="css/viewer.min.css"> <script src="js/viewer.min.js"></script>
jQuery版:
<link rel="stylesheet" href="css/viewer.min.css"> <script src="js/jquery.min.js"></script> <script src="js/viewer.min.js"></script>
2、npm安装
npm install viewerjs
3、Html结构
<!-- 单张图片 --> <div> <img id="image" data-original="img/viewer1.jpg" src="img/viewer1.jpg" alt="图片1"> </div> <!-- 多张图片 --> <ul id="viewer"> <li><img data-original="img/viewer1.jpg" src="img/viewer1.jpg" alt="图片1"></li> <li><img data-original="img/viewer2.jpg" src="img/viewer2.jpg" alt="图片2"></li> <li><img data-original="img/viewer3.jpg" src="img/viewer3.jpg" alt="图片3"></li> <li><img data-original="img/viewer4.jpg" src="img/viewer4.jpg" alt="图片4"></li> <li><img data-original="img/viewer5.jpg" src="img/viewer5.jpg" alt="图片5"></li> <li><img data-original="img/viewer6.jpg" src="img/viewer6.jpg" alt="图片6"></li> </ul>
4、JavaScript
Javascript版:
var image = new Viewer(document.getElementById('image'),{ url: 'data-original' }); var viewer = new Viewer(document.getElementById('viewer'),{ url: 'data-original' });
jQuery 版:
$('#image').viewer({ url: 'data-original' }); $('#viewer').viewer({ url: 'data-original' });
四、配置
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
inline | 布尔值 | false | 启用 inline 模式 |
button | 布尔值 | true | 显示右上角关闭按钮(jQuery 版本无效) |
navbar | 布尔值/整型 | true | 显示缩略图导航 |
title | 布尔值/整型 | true | 显示当前图片的标题(现实 alt 属性及图片尺寸) |
toolbar | 布尔值/整型 | true | 显示工具栏 |
tooltip | 布尔值 | true | 显示缩放百分比 |
movable | 布尔值 | true | 图片是否可移动 |
zoomable | 布尔值 | true | 图片是否可缩放 |
rotatable | 布尔值 | true | 图片是否可旋转 |
scalable | 布尔值 | true | 图片是否可翻转 |
transition | 布尔值 | true | 使用 CSS3 过度 |
fullscreen | 布尔值 | true | 播放时是否全屏 |
keyboard | 布尔值 | true | 是否支持键盘 |
interval | 整型 | 5000 | 播放间隔,单位为毫秒 |
zoomRatio | 浮点型 | 0.1 | 鼠标滚动时的缩放比例 |
minZoomRatio | 浮点型 | 0.01 | 最小缩放比例 |
maxZoomRatio | 数字 | 100 | 最大缩放比例 |
zIndex | 数字 | 2015 | 设置图片查看器 modal 模式时的 z-index |
zIndexInline | 数字 | 0 | 设置图片查看器 inline 模式时的 z-index |
url | 字符串/函数 | src | 设置大图片的 url |
build | 函数 | null | 回调函数,具体查看演示 |
built | 函数 | null | 回调函数,具体查看演示 |
show | 函数 | null | 回调函数,具体查看演示 |
shown | 函数 | null | 回调函数,具体查看演示 |
hide | 函数 | null | 回调函数,具体查看演示 |
hidden | 函数 | null | 回调函数,具体查看演示 |
view | 函数 | null | 回调函数,具体查看演示 |
viewed | 函数 | null | 回调函数,具体查看演示 |
相关文章
- 病毒木马查杀实战第025篇:JS下载者脚本木马的分析与防御
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
- 【Vue/Js】如何解决谷歌浏览器(chrome)扩展插件安装后,再打开自动消失问题(两种解决方案)
- uni-app - H5 网站项目接入集成 51LA 网站统计详细教程(提供 51LA.js 官方插件与引入教程)
- Mybatis分页实践:PageHelper 和 pagination.js
- eclipse安装spket插件提示js和jQuery代码
- ASP.NET给前端动态添加修改CSS样式JS 标题 关键字
- FullPage.js全屏插件文档及使用方法
- createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 404 at creat
- js中的事件委托(事件代理)详解
- jsp页面用html引入vue.js注意问题
- jquery.qrcode.js 插件生成二维码
- 向vuex存储数据和获取数据-和直接调用actions.js中的异步方法
- jQuery全屏滚动插件FullPage.js中文API文档
- 移动端插件IScroll.js
- [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
- js弹出层的插件
- js设置cookie(原生js)
- js+php实现文件上传显示文件上传进度条的插件
- JS魔法堂:函数重载 之 获取变量的数据类型
- HTML5游戏开发引擎Pixi.js新手入门讲解
- JS学习第7天——移动端特效(触屏事件touch、classList属性、轮播图、click延时解决方案、常用开发插件和开发框架)
- js定义了一个null或者""的变量,但是后端接收不到对应的值
- JQuery/JS插件 linq.js 获取所有选中行的Id
- JQuery/JS插件 数组转换为Table