首页 > 代码库 > viewer.js--一个强大的jQuery图像查看插件

viewer.js--一个强大的jQuery图像查看插件

2024-10-12 05:44:01   213人阅读

Viewer 是一款强大的 jQuery 图像浏览插件。

技术分享

主要功能：

  • 支持选项
  • 支持方法
  • 支持事件
  • 支持触摸
  • 支持移动
  • 支持缩放
  • 支持旋转
  • 支持键盘
  • 跨浏览器支持

查看演示      立即下载

部分插件网站提供的下载包有缺陷，不能兼容ie8-10。错误表现为放大的图片没有取到url，导致图片不显示。所以此链接为 viewer的官方演示，及github上的开源代码。

 

使用方法：

1.引入css和js

<link rel="stylesheet" href="http://www.mamicode.com/css/viewer.min.css"><script src="http://www.mamicode.com/js/viewer.min.js"></script>

2. html 部分

<ul id="viewer">    <li><img src="img/tibet-1.jpg" data-original="img/tibet-1.jpg" alt="图片1"></li>    <li><img src="img/tibet-2.jpg" data-original="img/tibet-2.jpg" alt="图片2"></li>    <li><img src="img/tibet-3.jpg" data-original="img/tibet-3.jpg" alt="图片3"></li>    <li><img src="img/tibet-4.jpg" data-original="img/tibet-4.jpg" alt="图片4"></li>    <li><img src="img/tibet-5.jpg" data-original="img/tibet-5.jpg" alt="图片5"></li>    <li><img src="img/tibet-6.jpg" data-original="img/tibet-6.jpg" alt="图片6"></li></ul>

data-original用来存储放大之后的图片地址，如果不存在，插件会取图片的src地址。如果想要放大之后换一张大图的话，可以把大图的路径写在data-original属性中。

alt用来存放图片的标题。

3. JavaScript 部分

$(‘#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回调函数，具体查看演示

viewer.js--一个强大的jQuery图像查看插件


联系
我们