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

主要功能:

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

查看演示      立即下载

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

使用方法:

1.引入css和js

  1. <link rel="stylesheet" href="css/viewer.min.css">
  2. <script src="js/viewer.min.js"></script>

2. html 部分

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

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

alt用来存放图片的标题。

3. JavaScript 部分

  1. $('#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 回调函数,具体查看演示

参数的用法:

  1. $('#viewer').viewer({url:"data-original"});

都看到这里了,如果对你有帮助,请帮我点个推荐呀~ :)

viewer.js--一个强大的jQuery图像查看插件的更多相关文章

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

    Viewer 是一款强大的 jQuery 图像浏览插件. 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览器支持 链接: viewer的官方演示,及g ...

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

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

  3. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

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

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

  5. 15 个响应式的 jQuery 图像滑块插件

    设计师和开发人员总是试图使用新技术让网站更智能,而我们发现在许多网站上 jQuery 的图像滑块插件是非常受欢迎的.本文继续介绍 15 个 jQuery 图像滑块插件以供您选择. ELASTISLID ...

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

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

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

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

  8. jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  9. jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

随机推荐

  1. Yahoo! Finance财经数据PYTHON临时读取方法

    本篇文章转自简书:http://www.jianshu.com/p/85d563d326a9 这段时间在看量化策略,找到了一个比较不错的开源项目,但是yahoo金融的数据源一直没有找到,在网上找到了这 ...

  2. WCF WS-Security and WSE Nonce Authentication【转】

    原文:http://weblog.west-wind.com/posts/2012/Nov/24/WCF-WSSecurity-and-WSE-Nonce-Authentication?utm_sou ...

  3. QLoo graphql engine 学习一 基本试用(docker&&docker-compose)

      说明:使用docker-compose 进行安装 代码框架 使用命令行工具创建 qlooctl install docker qloo-docker 运行qloo&&gloo 启动 ...

  4. php non-thread-safe和thread-safe这两个版本有何区别?

    php non-thread-safe和thread-safe这两个版本有何区别? non-thread-safe 非线程安全 与IIS 搭配环境thread-safe 线程安全 与apache 搭配 ...

  5. js中setAttribute 的兼容性

    js中setAttribute 的兼容性class和className兼容方法: object.setAttribute("class","content") ...

  6. 记录一次MyEclipse工程搭建的辛酸

    一个历史项目,使用的是Myeclipse6.5版本:这一天就砸在这个项目了. 调通web项目:内置的是tomcat插件,貌似和eclipse的server版的还不太一样. 长这个样子:

  7. SpringCloud初体验:三、Feign 服务间调用(FeignClient)、负载均衡(Ribbon)、容错/降级处理(Hystrix)

    FeignOpenFeign Feign是一种声明式.模板化的HTTP客户端. 看了解释过后,可以理解为他是一种 客户端 配置实现的策略,它实现 服务间调用(FeignClient).负载均衡(Rib ...

  8. LCD的接口类型详解

    LCD的接口有多种,分类很细.主要看LCD的驱动方式和控制方式,目前手机上的彩色LCD的连接方式一般有这么几种:MCU模式,RGB模式,SPI模式,VSYNC模式,MDDI模式,DSI模式.MCU模式 ...

  9. ruby里面的属性访问器

    和ios的@property一样 attr_accessor 表明是示例的getter和setter 下面的是rails的扩展,裸体class里面用,貌似会报错 cattr_accessor 表明是类 ...

  10. Android中Parcelable与Serializable接口用法

    转自: Android中Parcelable接口用法 1. Parcelable接口 Interface for classes whose instances can be written to a ...