AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

强大的图片预览组件Viewer.js

2023-02-21 1731
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 1、 Viewer.js简介2、Viewer.js支持的功能3、Viewer.js的API4 使用方法4.1 引入方式4.2 简单demo5.viewer.js源码，js版本

1、 Viewer.js简介

Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。


Viewer.js分为2个版本，js版本和jquery版本，下载地址分别为


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


jQuery 版本：GitHub - fengyuanchen/jquery-viewer: A jQuery plugin wrapper for Viewer.js.、


网上看到有说jquery版本有bug，最后选用啦js版本，demo截图大概如下


9bd00fee8b00ec9b95c0d2fa7785846.png

2、Viewer.js支持的功能

支持移动设备触摸事件

支持响应式

支持放大/缩小

支持旋转(类似微博的图片旋转)

支持水平/垂直翻转

支持图片移动

支持键盘

支持全屏幻灯片模式(可做屏保)

支持缩略图

支持标题显示

支持多种自定义事件


3、Viewer.js的API

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

4 使用方法

4.1 引入方式

js，jquery版本,直接文件引入

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，直接install

npm install viewerjs

4.2 简单demo

这里为我用的是js版本，简单做了一个demo

html代码

<!doctype html>
<html lang="en" ng-app="pharosApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>图片预览</title>
    <link rel="stylesheet" href="viewer.min.css" />
    <script src="jquery.min.js"></script>
    <script type="text/javascript" src="viewer.min.js"></script>
    <style>
        #viewer {
            padding: 2%;
        }
        #viewer img {
            margin: 1%;
            width: 22.5%;
            height: 200px;
            object-fit:fill;
        }
    </style>
    <script>
        function previewImg() {
            var viewer = new Viewer(document.getElementById('viewer'), {
                button: true,
                inline: false,
                zoomable: true,
                title: true,
                tooltip: true,
                minZoomRatio: 0.5,
                maxZoomRatio: 100,
                movable: true,
                interval: 2000,
                navbar: true,
                loading: true,
                show: function () {
                    viewer.update();
                }
            });
            $("body").on("click", ".viewer-container", function (e) {
                viewer.hide()
            });
            $("body").on("click", ".viewer-canvas", function (e) {
                e.stopPropagation();
            });
            $("body").on("click", ".viewer-footer", function (e) {
                e.stopPropagation();
            });
            $("body").on("click", ".viewer-button", function (e) {
                e.stopPropagation();
            });
            $("body").on("click", ".viewer-tooltip", function (e) {
                e.stopPropagation();
            });
            $("body").on("click", ".viewer-player", function (e) {
                e.stopPropagation();
            });
        }
    </script>
</head>
<body>
    <div id="viewer">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>
</body>
</html>

5.viewer.js源码，js版本

viewer.min.css

/*!
 * Viewer.js v0.3.1
 * https://github.com/fengyuanchen/viewerjs
 *
 * Copyright (c) 2015-2016 Fengyuan Chen
 * Released under the MIT license
 *
 * Date: 2016-02-02T11:35:36.273Z
 */.viewer-container,.viewer-navbar{background-

viewer.min.js

/*!
 * Viewer.js v0.3.1
 * https://github.com/fengyuanchen/viewerjs
 *
 * Copyright (c) 2015-2016 Fengyuan Chen
 * Released under the MIT license
 *
 * Date: 2016-02-02T11:35:52.542Z
 */
!function(e,t){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new
文章标签：
JavaScript
前端开发
API
关键词：
组件JavaScript
图片预览JavaScript
五月呀
目录
相关文章
阿珊和她的猫
|
6月前
|
JavaScript
Vue.js 修饰符：精准控制组件行为
Vue.js 修饰符：精准控制组件行为
阿珊和她的猫
69 0
土木林森
|
3月前
|
JavaScript 前端开发 开发者
哇塞！Vue.js 与 Web Components 携手，掀起前端组件复用风暴，震撼你的开发世界！
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发，单个组件包含模板、脚本和样式，方便构建复杂用户界面。Web Components作为新兴技术标准，利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素，实现跨框架复用。结合二者，不仅增强了Web Components的逻辑和交互功能，还实现了Vue.js组件在不同框架中的复用，提高了开发效率和可维护性。未来前端开发中，这种结合将大有可为。
土木林森
147 0
一缕微风绕指柔
|
1月前
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API：一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API：一种更灵活的组件状态管理方式
一缕微风绕指柔
26 1
游客qeoynko2nmbgk
|
2月前
|
Web App开发 JavaScript 前端开发
用 JavaScript 创建 XPCOM 组件
用 JavaScript 创建 XPCOM 组件
游客qeoynko2nmbgk
28 0
1313310884104708
|
3月前
|
JavaScript 前端开发 测试技术
[译]: Vue.js 函数式组件：what, why & when?
[译]: Vue.js 函数式组件：what, why & when?
1313310884104708
20 0
[译]: Vue.js 函数式组件：what, why & when?
土木林森
|
3月前
|
Android开发 iOS开发 C#
Xamarin：用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App，体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架，允许开发者使用单一的 C# 代码库构建高性能的原生移动应用，支持 iOS、Android 和 Windows 平台。作为微软的一部分，Xamarin 充分利用了 .NET 框架的强大功能，提供了丰富的 API 和工具集，简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用，包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能，帮助开发者提高开发效率并实现一致的用户体验。
土木林森
147 0
土木林森
|
3月前
|
JavaScript 开发者
揭秘Vue.js生命周期钩子：它们是如何掌控组件的生与死？
【8月更文挑战第30天】Vue.js 的生命周期钩子是开发者必须掌握的关键概念，它涵盖了组件从创建、挂载、更新到销毁的整个过程，提供了在特定时机操作DOM、获取数据或执行逻辑的能力。从 `beforeCreate` 到 `unmounted`，每个阶段都有特定的任务：如 `created` 适合异步数据获取，`mounted` 用于DOM操作，而 `beforeUnmount` 则用于清理资源。
土木林森
25 0
土木林森
|
3月前
|
JavaScript 前端开发
揭秘Vue.js组件魔法：如何轻松驾驭前端代码，让维护变得轻而易举？
【8月更文挑战第30天】本文探讨了如何利用Vue.js的组件化开发提升前端代码的可维护性。组件化开发将复杂页面拆分为独立、可复用的组件，提高开发效率和代码可维护性。Vue.js支持全局及局部组件注册，并提供了多种组件间通信方式如props、事件等。通过示例展示了组件定义、数据传递及复用组合的方法，强调了组件化开发在实际项目中的重要性。
土木林森
40 0
夏天49597
|
4月前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名，组件和路由是构建应用的关键。组件是自包含的实例，常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题，可使用命名空间、明确数据绑定和事件，以及采用Vuex管理状态。Vue Router提供声明式路由，常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
夏天49597
47 1
广州爱奇迪-伍华聪
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue，开发公司门户网站（2）--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
循序渐进BootstrapVue，开发公司门户网站（2）--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
广州爱奇迪-伍华聪
48 0

热门文章

最新文章

  • 1
    一看就会的Next.js App Router版 -- Routing（上）（一）
  • 2
    《JavaScript应用程序设计》一一2.9 方法API的设计
  • 3
    3.Ext JS 程序中使用路由
  • 4
    YY游戏云的angular js实践总结
  • 5
    javascript类型系统之Array
  • 6
    好程序员web前端培训分享JavaScript学习笔记cookie
  • 7
    HTML6 无 JavaScript 的单页应用引起一片哗然
  • 8
    JavaScript值得注意的小知识点
  • 9
    js正则表达式语法
  • 10
    JS中document对象详解
  • 1
    掌握JavaScript中的二进制运算，提升你的编程技能！
    133
  • 2
    掌握值类型和引用类型，让你的JavaScript代码更上一层楼！
    63
  • 3
    深入理解Vue.js中的nextTick：实现异步更新的奥秘
    143
  • 4
    垃圾回收：JavaScript内存管理的利器
    54
  • 5
    Web Worker：JavaScript的后台任务解决方案
    143
  • 6
    函数柯里化：JavaScript中的高级技巧
    62
  • 7
    Babel：JavaScript代码的编译利器
    112
  • 8
    抽象语法树（AST）：理解JavaScript代码的抽象语法树
    197
  • 9
    浏览器与Node.js事件循环：异同点及工作原理
    163
  • 10
    JS的几种设计模式，Web前端基础三剑客学习知识分享，前端零基础开发
    49

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • jQuery开发教程
  • Vue.js 入门与实战
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    无影云桌面