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

主要功能:

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

链接: viewer的官方演示,及github上的开源代码

使用方法:

1.引入css和js

<link rel="stylesheet" href="css/viewer.min.css">
<script src="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>

插件默认会取图片的src地址。如果想要放大之后换一张大图的话,可以把大图的路径写在data-original属性中,然后设置url : "data-original" 。

alt用来存放图片的标题。

3. JavaScript 部分(JQuery 依赖)

$('#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').viewer({url:"data-original"});

Viewer 是一款强大的 jQuery 图像浏览插件。的更多相关文章

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

    https://blog.csdn.net/qq_29132907/article/details/80136023 一.效果图  二.代码<!DOCTYPE html><html ...

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

    Viewer 是一款强大的 jQuery 图像浏览插件. 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览器支持 查看演示      立即下载 部分插 ...

  3. 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  4. 5 款最新的 jQuery 图片裁剪插件

    这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁剪功能. Cropit Cropit 是一个 jQuery 插件,支持图像裁剪和缩放功能.Cropit ...

  5. 20 个具有惊艳效果的 jQuery 图像缩放插件

    jQuery相对与Flash的魔力已经贯穿整个网络.尽管,Flash层被认为是用于网页设计的首选,然而随着jQuery的出现,以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边 ...

  6. 15款最好的 jQuery 网格布局插件

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  7. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  8. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  9. 11个新鲜出炉的jQuery图像滑块插件

    如今图像滑块已成为一种流行的Web设计元素,通过滑块,你可以在有限的页面空间中展示更多的内容,带给用户更佳的浏览体验.本文将为你带来一些非常实用的jQuery图像滑块插件. 1.  Basic Sli ...

随机推荐

  1. Web Api 返回图片流给前端

    public class TestController : ApiController { public HttpResponseMessage GetImg() { //获取文件的绝对路径 stri ...

  2. Linux下分区、格式化、自动挂载

    说明:现在硬盘基本没有了IDE,所以基本是从SCSI开始说起,第一块硬盘标示为sda,第二块为sdb,以此类推.那么第一块硬盘的第一个分区为sda1,也是以此类推. 一.硬盘分区 sudo fdisk ...

  3. IIS7.5 部署WCF项目问题集锦

    HTTP 错误 500.19 - Internal Server Error 描述:配置错误: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的 (overri ...

  4. vsftp 服务配置

    在CentOS或者RedHat Linux上有自带的ftp软件叫做vsftpd (very serure ftp) 搭建vsftpd 服务 yum 安装需要用两个包:vsftpd 和 db4-util ...

  5. docker开发之pyudev模块用法

    一.实现功能:获取docker_id #docker数据源: [root@docker scripts]# docker ps -a CONTAINER ID IMAGE COMMAND CREATE ...

  6. 前后台JSON传值得一个问题和异常处理net.sf.json.JSONException: Unquotted string '"name"'

    项目中做导入的时候遇到个bug,用JSON.stringify()序列号json对象传给后台:然后后台通过getPatameter()获取值时,前台的英文引号变成了中文引号. 原来代码如下:(自己排查 ...

  7. IQueryable接口与IEnumberable 区别

    总结一下: IEnumerable<T> 泛型类在调用自己的SKip 和 Take 等扩展方法之前数据就已经加载在本地内存里了,而IQueryable<T> 是将Skip ,t ...

  8. 全民Scheme(1):数字游戏

    刚刚看到两句话,感觉不错,分享给大家: 1.用户的问题.就是我们的问题 2.做一些用户想要的东西 (define add1 (lambda (x) (+ 1 x))) (define sub1 (la ...

  9. node - post - 上传图片

    html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  10. S1:适配器 Adapter

    将一个类的接口转换为用户期望的另外一个接口.适配器使得原本由于接口不兼容而不能一起工作的类可以一起工作   UML: 一.类适配器: class A { public function methodA ...