Mrcdh技术博客 Mrcdh技术博客
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Mrcdh

全栈开发小学生
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Html5

  • JavaScript

    • javascript常用操作
    • 安利一个网页调试开发利器vConsole
    • 各地图平台间的坐标转换
    • Viewer.js图片查看器
      • 安装
      • 基本使用
      • 配置项
    • IndexedDB的增删改查的封装
    • axios常用操作
    • 前端使用js-cookie用来操作cookie
    • Symbol基本使用
    • 高德地图常用操作
    • 使用qrcodejs2生成显示二维码
    • 常用Jquery插件
    • pushjs浏览器通知插件
  • Nodejs

  • express

  • electron

  • Android

  • 微信公众号

  • 框架

  • 其他

  • selenium

  • Sequelize

  • 大前端
  • JavaScript
mrcdh
2023-04-13
目录

Viewer.js图片查看器

# 安装

npm install viewerjs
1
<link rel="stylesheet" href="/static/viewer/viewer.css">
<script src="/static/viewer/viewer.js"></script>
1
2

# 基本使用

<div>
  <ul id="images">
    <li><img src="picture-1.jpg" alt="Picture 1"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>
1
2
3
4
5
6
7

import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

const viewer = new Viewer(document.getElementById('images'), {
  // 配置选项
});
1
2
3
4
5
6
7

# 配置项

参数名称 类型 默认值 说明
inline 布尔值 false 是否启用inline模式
button 布尔值 true 是否显示右上角关闭按钮
navbar 布尔值 true 是否显示缩略图导航
title 布尔值 true 是否显示当前图片的标题
toolbar 布尔值 true 是否显示工具栏
tooltip 布尔值 true 是否显示缩放百分比
movable 布尔值 true 图片是否可移动
zoomable 布尔值 true 图片是否可缩放
rotatable 布尔值 true 图片是否可旋转
scalable 布尔值 true 图片是否可翻转
transition 布尔值 true 是否使用CSS3过度
fullsreen 布尔值 true 播放时是否全屏
keyboard 布尔值 true 是否支持键盘
interval 整型 5000 播放间隔,单位为毫秒
zoomRatio 浮点型 0.1 鼠标滚轮滚动时缩放比例
minZoomRatio 浮点型 0.01(1%) 最小缩放比例
maxZoomRatio 整型 100(10000%) 最大缩放比例
zIndex 整型 2015 图片查看器modal模式时z-index值
zIndexInline 整型 0 图片查看器inline模式时z-index值
url 字符串/函数 src 设置查看图片时的图片地址来源
build 函数 null 回调函数,viewer.js文件加载完成后调用
built 函数 null 回调函数,viewer函数初始化之前调用(只调用一次)
show 函数 null 回调函数,加载展示图层前调用
shown 函数 null 回调函数,加载展示图层完成后调用
hide 函数 null 回调函数,点击关闭展示按钮时调用
hidden 函数 null 回调函数,展示图层关闭前调用
view 函数 null 回调函数,加载展示图片前调用
viewed 函数 null 回调函数,展示图片加载完成时调用
#javascript
上次更新: 2023/09/22, 16:54:32
各地图平台间的坐标转换
IndexedDB的增删改查的封装

← 各地图平台间的坐标转换 IndexedDB的增删改查的封装→

最近更新
01
uniapp常见问题
03-19
02
Vue3项目搭建
12-25
03
使用pnpm的monorepo组织项目
11-01
更多文章>
Theme by Vdoing | Copyright © 2020-2025 Mrcdh | 苏ICP备2020058908号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×