强大的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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/412808.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Can not lock the registry cache file】同一台机器部署多个dubbo应用(配置文件相同)

大家好&#xff0c;我是烤鸭&#xff1a; 场景是&#xff1a; 多个项目&#xff08;配置文件相同&#xff09;部署同一个服务器&#xff0c;部署的代码大部分相同。&#xff08;具体原因是同一个项目的不同分支部署了两次&#xff09; 启动之后&#xff0c;一直在报这个错误&a…

[css] 使用纯CSS代码实现动画的暂停与播放

[css] 使用纯CSS代码实现动画的暂停与播放 一个属性&#xff1a;animation-play-state 取值&#xff1a;paused&#xff08;暂停&#xff09;|running&#xff08;播放&#xff09; hover取代点击 .stop:hover~.animation { animation-play-state: paused; }checked伪类 radio…

201771010137 赵栋 《第十二周学习总结》

一&#xff1a;理论部分 1.&#xff08;1&#xff09; 用户界面(User Interface)用户与计算机系统(各种程序)交互的接口 &#xff08;2&#xff09;图形用户界面(Graphical User Interface)以图形方式呈现的用户界面 2.AWT:Java 的抽象窗口工具箱&#xff08; Abstract WindowT…

linux cron 定时任务无效 /var/spool/cron/xxx

大家好&#xff0c;我是烤鸭&#xff1a; 关于配置了 /var/spool/cron/root 表达式后无效。 vi /var/spool/cron/root root中内容 0 1/1 * * * ? sh /opt/web_app/sh/check_kibana.sh 单独执行 check_kibana.sh 是没有问题的。 应该是cron服务没启动。 参考文章&#xff1a…

[css] 举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同?

[css] 举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同&#xff1f; <div> <p>大儿子</p> <div>二儿子</div> <p>三儿子</p> </div> <p>二叔</p> <div>三叔<div>div:nth-chi…

多服务器 elk 搭建 [elasticsearch 7.0 ]

大家好&#xff0c;我是烤鸭&#xff1a; 今天分享一下多服务器的elk搭建。 1. 流程规划 2. 执行搭建 最新的版本和对应下载地址可以在官网查询到 https://www.elastic.co/cn/products/ 2.1 elasticsearch 7.0 搭建 2.1.1 下载 wget https://artifacts.elastic.co/…

[css] 请举例说明伪元素 (pseudo-elements) 有哪些用途?

[css] 请举例说明伪元素 (pseudo-elements) 有哪些用途&#xff1f; 可以不用再多写一个 dom可以用 content 搭配出很多效果例子&#xff1a;固定尺寸 2:1 的容器文本前后增加 icon 或图片使用 data-* 和 content: attr(data-*) 搭配使用 :hover 和 content 搭配出很多效果作为…

知乎问答:现在程序员的工资是不是被高估了?

对于优秀的程序员来说&#xff0c;薪酬的天花板犹如发际线&#xff0c;没有最高只有更高。而对于只想「混日子」的程序员来说&#xff0c;高薪很可能是泡沫&#xff0c;风一吹就碎。 一、程序员的工资真的高吗&#xff1f; 《2018年中国程序员生存状况报告》&#xff0c;来源&a…

springboot 闪退。falling back to default profiles: default StandardService - Stopping service [Tomcat]

大家好&#xff0c;我是烤鸭&#xff1a; 今天分享一个springboot 闪退的问题。确切得说是没有起来。 环境&#xff1a; springboot 版本 2.1.0.RELEASE 异常&#xff1a; 2019-05-25 19:39:00.822 > [main] > INFO com.cgmanage.migrate.MigrateApplication - Starti…

[css] 设置字体时为什么建议设置替换字体?

[css] 设置字体时为什么建议设置替换字体&#xff1f; 这是由于网站用户的浏览设备不同&#xff0c;可能并不支持或没有安装你所设置的字体。 这时候就会自动使用替换字体来对网页进行一个展示。 设置替换字体可以尽可能保证所有用户的浏览体验。个人简介 我是歌谣&#xff0…

lombok 的bug?lombok 导致 springmvc 使用 @RequestBody注解 接收 json数据 对象参数绑定失败

大家好&#xff0c;我是烤鸭&#xff1a; lombok 导致 springmvc 使用 RequestBody注解 接收 json数据 对象参数绑定失败。 环境版本&#xff1a; spring 5.x 1. 场景复现 问题出现在创建对象的属性名称。比如我有一个类中的属性值是 String aTest; 首字…

[css] 说说你对min-width和max-width的理解,它们有什么运用场景?

[css] 说说你对min-width和max-width的理解&#xff0c;它们有什么运用场景&#xff1f; min-width和max-width可以使得自适应布局保持一个基本的样式。 用于多列布局时候&#xff0c;可以保证某几列的布局保持在一定的范围内。 比较常见的应用应该是网站首页的三栏布局类型&a…

web APIS

WEB API系列&#xff1a; 很多人都很迷惑&#xff0c;既然有了WCF为什么还要有WEB API&#xff1f;WEB API会不会取代WCF&#xff1f; 就我的看法&#xff0c;WCF提供的是一种RPC实现的集合&#xff0c;WCF的设计更多地考虑了SOA的场景&#xff0c;以及各种RPC的问题。很多人也…

[css] 说说你对hasLayout的理解,触发hasLayout的方式有哪些?

[css] 说说你对hasLayout的理解&#xff0c;触发hasLayout的方式有哪些&#xff1f; hasLayout可理解为是IE7以及更旧版本的BFC。 跟BFC一样&#xff0c;hasLayout不能直接通过属性进行设置&#xff0c;而是需要一定的触发条件。具体条件可在进行向下兼容时再查阅相关资料&…

【mysql分区分表】mysql 按时间分区 【partition】

大家好&#xff0c;我是烤鸭&#xff1a; 今天分享一下有关 mysql 分区。 需求&#xff1a; 按时间分区。 对千万数据左右的表&#xff0c;进行分区&#xff0c;数据的增加量大概千万/年。 代码实现&#xff1a; 模拟之前已经存在的表&#xff1a; DROP TABLE IF EXISTS…

NOIp2018滚粗记

小蒟蒻chd在NOIp2018成功滚粗&#xff0c;下面向大家分享一下我的滚粗经验。 &#xff08;CCF竟然把老爷机给换了&#xff09; Day0 没什么好写的&#xff0c;反正就和平时一样。 Day1 早上6:50才起床&#xff0c;赶在7:20之前上了车&#xff0c;长沙理工大真的远&#xff0c;坐…

[css] 什么是zoom?它有什么作用?

[css] 什么是zoom&#xff1f;它有什么作用&#xff1f; zoom 最初是 IE 的私有属性&#xff0c;现在除了 Firefox 之外的浏览器基本都支持 zoom。不过&#xff0c;zoom 依旧不是正式的属性。与之对应的 transform 的 scale 属性是正式的 CSS 属性。zoom 主要的作用是用于元素…

【dubbo】http.conn.HttpHostConnectException.host: 'org.apache.http.HttpHost' could not be instantiated

大家好&#xff0c;我是烤鸭&#xff1a; dubbo遇到如下问题。 1. 异常详细信息&#xff1a; 某个异常对象无法实例化。 com.alibaba.dubbo.rpc.RpcException: Failed to invoke remote method: updateCardBycustomerNum, provider: dubbo://20.x.xx.48:20883/com.etc.servi…

2018 ACM-ICPC青岛现场赛 B题 Kawa Exam 题解 ZOJ 4059

题意&#xff1a;BaoBao正在进行在线考试&#xff08;都是选择题&#xff09;&#xff0c;每个题都有唯一的一个正确答案&#xff0c;但是考试系统有m个bug(就是有m个限制)&#xff0c;每个bug表示为第u个问题和第v个问题你必须选择相同的选项&#xff0c;题目问你&#xff0c;…

[css] 举例说明微信端兼容问题有哪些?

[css] 举例说明微信端兼容问题有哪些&#xff1f; 说一个微信小程序的iPhoneX适配吧&#xff0c; 因为iPhoneX底部没有虚拟按键&#xff0c;底部的横线会出现遮挡这时候就要处理下&#xff1a; 大概思路就是获取到客户端设备&#xff0c;然后判断是iPhoneX就换样式。 在app.js…