强大的jQuery图片查看器插件Viewer.js

简介

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

Viewer.js 有以下特点：

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

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

在线演示及下载

在线演示：http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Viewer.js/

下载页面

使用方法

引入文件
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>

Html结构


<ul id="viewer"><li><img src="img/viewer1.jpg" alt="图片1"></li><li><img src="img/viewer2.jpg" alt="图片2"></li><li><img src="img/viewer3.jpg" alt="图片3"></li><li><img src="img/viewer4.jpg" alt="图片4"></li><li><img src="img/viewer5.jpg" alt="图片5"></li><li><img src="img/viewer6.jpg" alt="图片6"></li>
</ul>

JavaScript
Javascript版：


var viewer = new Viewer(document.getElementById('viewer'));

jQuery 版：


$('#viewer').viewer();

配置

名称	类型	默认值	说明
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	回调函数，具体查看演示

转载于:https://www.cnblogs.com/lalalagq/p/9973509.html

强大的jQuery图片查看器插件Viewer.js相关推荐

html查看器查看图片,jQuery功能强大的图片查看器插件
viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备,支持键盘控 ...
图片在线预览html,Viewer.js – 强大的JS/jQuery图片查看器
Viewer.js – 强大的JS/jQuery图片查看器分类:代码日期:2016-08-04 点击(282,284) 下载(1) 来源:未知收藏简介 Viewer.js 是一款强大的图片查看 ...
html页面点击图片名称查看图片------图片预览插件viewer.js使用
前言在做项目时,会遇到在前台展示附件详情,比如图片,word,pdf等.viewer.js 图片查看器,用来查看页面中的图片. 基本效果: Viewer.js的使用这是一个github工程,功能很 ...
给图片查看器插件Magnify新增放大镜功能
说实话Magnify图片查看器插件已经非常强大了,媲美Windows的图片查看器,但是,毕竟是开源插件,用起来简单,就是兼容性等各种bug问题.不过还好能用,自己优化一下就好. 在实际项目中,如果只是 ...
Viewer.js Javascript/jQuery图片查看器
简介 Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Viewer.js 有以下特点: ...
html5 photo gallery,jquery图片查看器 jquery-photo-gallery
bug:滚轮缩放,底层页面显示高度也会跟着移动: esc.上.下.左.右键在未点击当前iframe下,并没有生效: 修复:未阻止滚轮事件冒泡: 图片查看是在新打开的html页面查看,在用户未点击情况下 ...
jquery 图片预览插件viewer
官方地址 1 引入 <link href="__CDN__/assets/viewer/css/viewer.css" rel="stylesheet"& ...
图片查看器插件(带缩略图) - viewer.js
插件相关资源地址注意:JS 版本和 jQuery 版本名字虽然一样,但代码不一样,不能通用. Demo Github Doc 预览效果 React版参考地址转载于:https://www.cnb ...
jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）
前言因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

强大的jQuery图片查看器插件Viewer.js

简介

在线演示及下载

使用方法

配置

强大的jQuery图片查看器插件Viewer.js相关推荐

最新文章

热门文章