Viewer.js 图片预览插件

2024-04-19 17:08:36

一、简介

Viewer.js 是一款强大的图片查看器。

Viewer.js 有以下特点：

支持移动设备触摸事件
支持响应式
支持放大/缩小
支持旋转(类似微博的图片旋转)
支持水平/垂直翻转
支持图片移动
支持键盘
支持全屏幻灯片模式(可做屏保)
支持缩略图
支持标题显示
支持多种自定义事件

Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样，但代码不一样，不能通用。

二、下载

纯JS版本：https://github.com/fengyuanchen/viewerjs

jQuery 版本：https://github.com/fengyuanchen/jquery-viewer

三、使用方法

直接引入文件

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>

npm安装

npm install viewerjs

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>

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	回调函数，具体查看演示

Viewer.js 图片预览插件相关推荐

html页面点击图片名称查看图片------图片预览插件viewer.js使用
前言在做项目时,会遇到在前台展示附件详情,比如图片,word,pdf等.viewer.js 图片查看器,用来查看页面中的图片. 基本效果: Viewer.js的使用这是一个github工程,功能很 ...
移动端图片预览插件-fly-zomm-img.min.js
移动端图片预览插件,一个JQ的插件,支持手势放大缩小:有点小bug,不过感觉是可以接受的: 插件的地址:http://www.jq22.com/jquery-info15466 那里有具体的说明,但是 ...
vue3 开发一个图片预览插件
vue3 的插件开发和vue2思路类似但是写法却迥异.主要变化在vue3没有了extend构造器. 这次我们通过一个图片预览插件,贯通整个vue3插件开发的过程. 1 在src下新建lplugins文 ...
React 图片预览插件 rc-viewer @hanyk/rc-viewer
最近一个需求是图片要实现预览并且可以上下切换,react接触不是很久,查了好多资料,最终对@hanyk/rc-viewer下手,jquery用多了伙伴都知道viewer.js,一个很强大的图片预览插件 ...
dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
VSCode图片预览插件 Image preview
VSCode前端开发图片预览插件 Image preview(支持css预览支持svg格式) 一款提高前端开发效率的插件 ,代码中hover直接预览图片先上效果图不仅html中可以预览 js代码 ...
pc 图片预览放大端vue_安利一款简单好用的Vue图片预览插件
在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...
html photoswipe原理,手机图片预览插件photoswipe.js使用总结
手机图片预览photoswipe,支持pc图片预览,多用于android,ios的手机图片预览. 在photoswipe官网有1.0.11的包下载,但是1.0.11这个版本,存在缺陷,在部分andro ...
Windows系统SVG图片预览插件
由于工作中经常需要对组图查看和管理,而Windows系统不支持在文件夹下直接预览svg图片, HBuilderX 插件市场没有找到相应的svg插件,比较麻烦.经过查找,发现svg扩展插件(SVG Vi ...

最新文章

热门文章