Viewer.js 图片预览插件使用

Viewer.js 图片预览插件使用

        </h1>
        <div class="clear"></div>
        <div class="postBody">
            <div id="cnblogs_post_body" class="blogpost-body blogpost-body-html">

1|0一、简介

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

Viewer.js 有以下特点:

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

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

2|0二、下载

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

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

3|0三、使用方法

3|11、直接引入文件

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>

3|22、npm安装

  
  
npm install viewerjs

3|33、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>

3|44、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' });

4|0四、配置

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

__EOF__

本文作者寒爵
本文链接: https://www.cnblogs.com/Jimc/p/10132177.html
关于博主:评论和私信会在第一时间回复。或者 直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角 推荐一下。您的鼓励是博主的最大动力!
`在这里插入代码片`
分类: JavaScript
<div id="blog_post_info">
2
0
<div class="clear"></div>
<div id="post_next_prev">

<a href="https://www.cnblogs.com/Jimc/p/10114657.html" class="p_n_p_prefix">« </a> 上一篇:    <a href="https://www.cnblogs.com/Jimc/p/10114657.html" data-featured-image="" title="发布于 2018-12-13 16:17">深拷贝和浅拷贝</a>
<br>
<a href="https://www.cnblogs.com/Jimc/p/10151890.html" class="p_n_p_prefix">» </a> 下一篇:    <a href="https://www.cnblogs.com/Jimc/p/10151890.html" data-featured-image="" title="发布于 2018-12-20 19:53">CAS单点登录(一):单点登录与CAS理论介绍</a>
posted @ 2018-12-17 16:17  寒爵  阅读( 17383)  评论( 1编辑  收藏  举报
</div><!--end: topics 文章、评论容器-->

· ASP.NET Core 6框架揭秘实例演示[37]:重定向的N种实现方式


· 理解 ASP.NET Core - 全球化&本地化&多语言


· [MAUI]写一个跨平台富文本编辑器


· 多方合作时,系统间的交互是怎么做的?


· 万字长文讲透 RocketMQ 4.X 消费逻辑

即构专区:
· AI 加持实时互动|ZegoAvatar 面部表情随动技术解析
· 即构推出低延迟直播产品,全链路优化体验升级
· 零基础实现Java直播(一):集成
· 零基础实现Java直播(二):实现流程
· 【活动回顾】WebRTC服务端工程实践和优化探索
</div><!--end: forFlow -->
</div>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值