Viewer.js 图片预览插件使用
一、简介
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 | 回调函数,具体查看演示 |
Viewer.js 图片预览插件使用的更多相关文章
- js图片预览插件,不涉及上传
小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...
- Vue.js图片预览插件
vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault. ...
- 适用于移动端、PC 端 Vue.js 图片预览插件
1.安装:npm install --save vue-picture-preview 2.使用: (1)入口文件中main.js中全局引入: import Vue from 'vue' import ...
- Vue PC端图片预览插件
*手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...
- eclipse 图片预览插件
eclipse 图片预览插件 CreateTime--2018年4月22日22:59:55 Author:Marydon 下载地址:eclipse 图片预览插件 将插件文件夹直接拷贝到eclips ...
- previewImage.js图片预览缩放保存插件
previewImage.js好用的图片预览缩放保存插件
- 在 vue 中使用 vieiwer 图片预览插件
https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...
- vue.js 图片预览
Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...
- vue-preview vue图片预览插件+缩略图样式
一.安装 npm i vue-preview -S 二.main.js中 导入组件 //vue-preview 开始 import VuePreview from 'vue-preview'; // ...
随机推荐
- stixel-net绘制指标图
需解决问题: 1.离散点进行平滑曲线画法 https://blog.csdn.net/cdqn10086/article/details/70143616 def draw_curve(x,y,img ...
- 【luogu P1004 方格取数】 题解
题目链接:https://www.luogu.org/problemnew/show/P1004 标准的DP,不明白为什么有普及+提高的难度 四维DP[i][j][k][l] 表示第一遍走到i,j格子 ...
- CodeForces 501B Misha and Changing Handles(STL map)
Misha hacked the Codeforces site. Then he decided to let all the users change their handles. A user ...
- sql server 中数据库数据导入到另一个库中
这篇说了sql语句对于备份的数据库进行还原 ,如果数据量大了还是什么问题,发现我的数据丢失了一些,头疼 sql server 备份还原 下面使用的的数据导入来解决这个问题,因为数据量比较大,导出来的脚 ...
- C#基础实例
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...
- c语言描述的静态查找表
顺序表的查找: 直接循环依次和目标比较就行 有序表的查找(二分查找): int search(SS *T,Type key){ int mid; ; int high=T.length; while( ...
- java基础(杂记)
java基础夯实(杂记):1:创建实例对象可以通过无参的构造函数然后调用成员变量去初始化属性,也可以自己定义有参构造方法直接初始化属性,当属性为private时我们可以通过getset方法间接访问:2 ...
- CSS 中定位方式有几种,说明他们的意义
1.static 默认定位方式 显示为没有设置定位时的位置 2.fixed(固定定位) 他所相对固定的对象是可视窗口,与其他无关.以浏览器窗口作为参考进行定位 3.relative(相对定位) 元 ...
- 从$emit 到 父子组件通信 再到 eventBus
故事还是得从$emit说起,某一天翻文档的时候看到$emit的说明 触发当前实例上的事件?就是自身组件上的事件呗,在父子组件通信中,父组件通过props传递给子组件数据(高阶组件可以用provide和 ...
- jenkins部署记录
环境规划 主机分配 192.168.2.139 : gitlab 192.168.2.141 : jenkins 192.168.2.142 : haproxy01 192.168.2.143 :ha ...