Viewer.js 是一款强大的图片相册插件,像SNS交友网站一般都会用到点击缩略图,弹出层大图片,而且弹出层有多个控制按钮,比如放大缩小、旋转、撤回等,底部有缩略图列表可切换。

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

在线实例

默认效果 jQuery版本
回调函数 自定义方法

使用方法

<ul id="sucaihuo"> 
    <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li> 
    <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li> 
    <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li> 
    <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li> 
    <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li> 
    <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li> 
</ul>
var viewer = new Viewer(document.getElementById('sucaihuo'), { 
    url: 'data-original' 
});

参数详解

参数 描述 默认值
inline 启用 inline 模式 false
button 显示右上角关闭按钮(jQuery 版本无效) true
navbar 显示缩略图导航 true
title 显示当前图片的标题(现实 alt 属性及图片尺寸) true
toolbar 显示工具栏 true
tooltip 显示缩放百分比 true
movable 图片是否可移动 true
zoomable 图片是否可缩放 true
rotatable 图片是否可旋转 true
scalable 图片是否可翻转 true
transition 使用 CSS3 过度 true
fullscreen 播放时是否全屏 true
keyboard 是否支持键盘 true
interval 播放间隔,单位为毫秒 5000
zoomRatio 鼠标滚动时的缩放比例 0.1
minZoomRatio 最小缩放比例 0.01
maxZoomRatio 最大缩放比例 100
zIndex 设置图片查看器 modal 模式时的 z-index 2015
zIndexInline 设置图片查看器 inline 模式时的 z-index 0
url 设置大图片的 url src
build 回调函数,具体查看演示 null
built 回调函数,具体查看演示 null
show 回调函数,具体查看演示 null
shown 回调函数,具体查看演示 null
hide 回调函数,具体查看演示 null
hidden 回调函数,具体查看演示 null
view 回调函数,具体查看演示 null
viewed 回调函数,具体查看演示 null

一款实用的viewer.js 图片相册的更多相关文章

  1. 使用jquery版本的viewer.js图片更新的问题

    参考博客: 使用jquery版本的viewer.js图片更新的问题 - cc_fys的博客 - CSDN博客 https://blog.csdn.net/cc_fys/article/details/ ...

  2. Viewer.js 图片预览插件使用

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片 ...

  3. viewer.js图片查看器插件(可缩放/旋转/切换)

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  5. 很实用的baguetteBox.js 图片弹出层

    lightbox JS插件--baguetteBox.js,它是用纯Javascript创建的图像展示效果,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. baguetteB ...

  6. 实用的原生js图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 强大的jQuery图片查看器插件Viewer.js

    简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...

  8. Viewer.js – 强大的JS/jQuery图片查看器

    简介 Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Viewer.js 有以下特点: ...

  9. 使用VIEWER.JS进行简单的图片预览

    <script src="../res/js/viewer.min.js"></script><script type="text/java ...

随机推荐

  1. 关于orapwd命令entries参数的探究

    今日早上看Oracle官方文档<Administrator's Guide>时,在密码文件章节,关于orapwd命令entries参数的说明如下: This argument specif ...

  2. 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

    在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...

  3. shell脚本学习心得

    近来主要捣鼓ubuntu,大多数项目中都用到了sh脚本作为启动脚本等,以前只是大概明白如何使用,今天需要自己修改并运行脚本就碰到了很多问题,所以决定静下心来学习一下shell脚本,学习了几个小时,现将 ...

  4. 如何使用office2010插入屏幕截图

    当我们习惯了用QQ的屏幕截图之后,当某一天我们在一台没有装QQ的办公电脑上,它装着office2010,我们可以实现用office来截图吗?其实Office2010深藏着犀利的截图工具. 插入图片到文 ...

  5. 默認打開pr_debug和dev_dbg

    作者:彭東林 郵箱:pengdonglin137@163.com 日期:2016-08-26 18:04:14 在進行Linux驅動開發時經常見到使用pr_debug和dev_dbg打印驅動的log, ...

  6. 轻松自动化---selenium-webdriver(python) (十一)

    本节重点: 控制滚动条到底部 有时候我们需要控制页面滚动条上的滚动条,但滚动条并非页面上的元素,这个时候就需要借助js是来进行操作.一般用到操作滚动条的会两个场景: 注册时的法律条文需要阅读,判断用户 ...

  7. Elasticsearch聚合 之 Date Histogram聚合

    Elasticsearch的聚合主要分成两大类:metric和bucket,2.0中新增了pipeline还没有研究.本篇还是来介绍Bucket聚合中的常用聚合--date histogram.参考: ...

  8. Redis 集群方案

    根据一些测试整理出来的一份方案(转自http://www.cnblogs.com/lulu/): 1. Redis 性能 对于redis 的一些简单测试,仅供参考: 测试环境:Redhat6.2 , ...

  9. Newtonsoft.Json 的序列化与反序列化

    首先补充一点,Json.Net是支持序列化和反序列化DataTable,DataSet,Entity Framework和NHibernate的.我举例说明DataTable的序列化和反序列化.创建一 ...

  10. UEditor的使用

    一.引用CSS和JS: <meta http-equiv="Content-Type" content="text/html;charset=utf-8" ...