简要教程

viewer是一款功能强大的图片查看器jQuery插件。它可以实现ACDsee等看图软件的部分功能。它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片。该图片查看器还支持移动设备,支持键盘控制,功能十分强大。

查看演示      下载插件

安装

可以通过nmp或bower来安装该图片查看器插件。

  1. npm install imageviewer
  2. bower install imageviewer

复制代码

使用方法

使用该幻灯片插件需要引入jQuery,viewer.css和viewer.js文件。

  1. <link rel="stylesheet" href="css/viewer.css" type="text/css">
  2. <script type="text/javascript" src="js/jquery.min.js"></script>
  3. <script type="text/javascript" src="js/viewer.js"></script>

复制代码

HTML结构

该图片查看器需要一个块级元素来作为包裹元素,可以只有一张图片,直接使用<img> 元素,或者是一组图片,使用无序列表来制作:

  1. <!--单张图片-->
  2. <div>
  3. <img class="image" src="picture.jpg" alt="Picture">
  4. </div>
  5. <!--一组图片-->
  6. <div>
  7. <ul class="images">
  8. <li><img src="picture.jpg" alt="Picture"></li>
  9. <li><img src="picture-2.jpg" alt="Picture 2"></li>
  10. <li><img src="picture-3.jpg" alt="Picture 3"></li>
  11. </ul>
  12. </div>

复制代码

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该图片查看器插件。

  1. // View one image
  2. $('.image').viewer();
  3. // View some images
  4. $('.images').viewer();

复制代码

键盘控制

在模态窗口模式下,可以使用键盘来控制查看图片:

  • Esc:退出全屏并停止播放。
  • ←:查看前一张图片。
  • →:查看下一张图片。
  • ↑:放大图片。
  • ↓:缩小图片。
  • Ctrl + 0:缩小到初始大小。
  • Ctrl + 1:放大到自然尺寸。

配置参数

你可以通过$().viewer(options)来设置这个图片查看器的参数。如果你要修改全局配置参数,你需要使用$.fn.viewer.setDefaults(options)。

  • inline:类型:Boolean,默认值:false。使用内联模式来查看图片。
  • button:类型:Boolean,默认值:true。在图片查看器的右上角显示按钮。
  • navbar:类型:Boolean,默认值:true。显示导航条。
  • title:类型:Boolean,默认值:true。显示图片标题。标题来自图片的alt属性或从URL解析的图片名称。
  • toolbar:类型:Boolean,默认值:true。显示工具栏。
  • tooltip:类型:Boolean,默认值:true。在放大缩小图片的时候显示图片的百分比比例。
  • movable:类型:Boolean,默认值:true。图片是否可以移动。
  • zoomable:类型:Boolean,默认值:true。图片是否可以放大缩小。
  • rotatable:类型:Boolean,默认值:true。图片是否可以旋转。
  • scalable:类型:Boolean,默认值:true。图片是否可以翻转。
  • transition:类型:Boolean,默认值:true。是否为某些指定的元素使用CSS3 Transition效果。
  • fullscreen:类型:Boolean,默认值:true。是否允许全屏模式。该功能需要浏览器支持Full Screen API。
  • keyboard:类型:Boolean,默认值:true。是否可以使用键盘控制。
  • interval:类型:Number,默认值:5000。自动播放时图片的切换时间间隔。
  • zoomRatio:类型:Number,默认值:0.1。在使用鼠标缩放图片时的缩放比例。
  • minZoomRatio:类型:Number,默认值:0.01。图片缩小的最小比例。
  • maxZoomRatio:类型:Number,默认值:100。图片放大的最小比例。
  • zIndex:类型:Number,默认值:2015。定义图片查看器模态窗口的CSS z-index属性的值。
  • zIndexInline:类型:Number,默认值:0。定义图片查看器在内联模式中CSS z-index属性的值。
  • url:类型:String 或 Function,默认值:'src'。定义原始图片的URL地址。
  • build:类型:Function,默认值:null。"build.viewer"事件的快捷方式。
  • built:类型:Function,默认值:null。"built.viewer"事件的快捷方式。
  • show:类型:Function,默认值:null。"show.viewer"事件的快捷方式。
  • shown:类型:Function,默认值:null。"shown.viewer"事件的快捷方式。
  • hide:类型:Function,默认值:null。"hide.viewer"事件的快捷方式。
  • hidden:类型:Function,默认值:null。"hidden.viewer"事件的快捷方式。

方法

由于该图片查看器插件使用的是异步加载图片的方式,所以你需要在shown(模态窗口模式)或built(内联模式)之后才能调用下面的方法,除了模态窗口模式的show方法和destroy方法之外。

  1. // Modal mode
  2. $().viewer({
  3. shown: function () {
  4. $().viewer('method', argument1, , argument2, ..., argumentN);
  5. }
  6. }
  7. // Inline mode
  8. $().viewer({
  9. built: function () {
  10. $().viewer('method', argument1, , argument2, ..., argumentN);
  11. }
  12. }

复制代码

  • show():显示图片查看器。只在模态窗口模式中有效。
  • hide():隐藏图片查看器。只在模态窗口模式中有效。
  • view([index]):

index (optional):

  • 类型:Number
  • 默认值:0
  • 在查看的图片的index

通过图片的index来查看某张图片。

  1. $().viewer('view', 1); // 查看第二张图片

复制代码

  • prev():查看前一张图片。
  • next():查看下一张图片。
  • move(offsetX[, offsetY]):移动图片。

offsetX:

  • 类型:Number
  • 默认值:0
  • 水平方向上移动的距离,单位像素。

offsetY(optional):

  • 类型:Number
  • 垂直方向上移动的距离,单位像素。
  • 如果没有提供,默认值是offsetX。
  1. $().viewer('move', 1);
  2. $().viewer('move', -1, 0); // 向左移动图片
  3. $().viewer('move', 1, 0);  // 向有移动图片
  4. $().viewer('move', 0, -1); // 向上移动图片
  5. $().viewer('move', 0, 1);  // 向下移动图片

复制代码

  • zoom(ratio[, hasTooltip]):缩放图片。

ratio:

  • 类型:Number
  • Zoom in(放大):需要一个正数(ratio > 0)。
  • Zoom out(缩小):需要一个负数(ratio < 0)

hasTooltip (optional):

  • 类型:Boolean
  • 默认值:false
  • 显示tooltip。
  1. $().viewer('zoom', 0.1);
  2. $().viewer('zoom', -0.1);

复制代码

  • zoomTo(ratio[, hasTooltip]):缩放图片到指定的比例。

ratio:

  • 类型:Number
  • 需要一个正数(ratio > 0)

hasTooltip (optional):

  • 类型:Boolean
  • 默认值:false
  • 显示tooltip。
  1. $().viewer('zoomTo', 0); // Zoom to zero size (0%)
  2. $().viewer('zoomTo', 1); // Zoom to natural size (100%)

复制代码

  • rotate(degree):旋转图片。

degree:

  • 类型:Number
  • 向右旋转需要一个正数(ratio > 0)
  • 向左旋转需要一个负数(ratio < 0)

该方法需要浏览器支持CSS3 2D Transforms(IE9+)。

  1. $().viewer('rotate', 90);
  2. $().viewer('rotate', -90);

复制代码

  • rotateTo(degree):将图片旋转到指定的角度。

degree: 类型:Number 该方法需要浏览器支持CSS3 2D Transforms(IE9+)。

  1. $().viewer('rotateTo', 0); // 将图片重置到0度
  2. $().viewer('rotateTo', 360); // 将图片旋转一周

复制代码

  • scale(scaleX[, scaleY]):翻转图片。

scaleX:

  • 类型:Number
  • 默认值:1
  • 图片横坐标方向上的缩放比例。
  • 当值为1时不做任何事情。

scaleY:(optional

  • 类型:Number
  • 图片纵坐标方向上的缩放比例。
  • 如果未指定,默认值为scaleX。
  • 该方法需要浏览器支持CSS3 2D Transforms(IE9+)。
  1. $().viewer('scale', -1); // 在垂直和水平方向上翻转图片
  2. $().viewer('scale', -1, 1); // 水平翻转
  3. $().viewer('scale', 1, -1); // 垂直翻转

复制代码

  • scaleX(scaleX):水平翻转图片。

scaleX:

  • 类型:Number
  • 默认值:1
  • 图片横坐标方向上的缩放比例。
  • 当值为1时不做任何事情。

该方法需要浏览器支持CSS3 2D Transforms(IE9+)。

  1. $().viewer('scaleX', -1); // 水平翻转

复制代码

  • scaleY(scaleY):垂直翻转。

scaleY:

  • 类型:Number
  • 默认值:1
  • 图片纵坐标方向上的缩放比例。
  • 当值为1时不做任何事情。

该方法需要浏览器支持CSS3 2D Transforms(IE9+)。

  1. $().viewer('scaleY', -1); // 水平翻转

复制代码

  • play():播放图片。
  • stop():停止播放。
  • full():进入模态窗口模式。仅在内联模式中有效。
  • exit():退出模态窗口模式。仅在内联模式中有效。
  • tooltip():以百分比显示当前图片的比例。需要tooltip参数设置为true。
  • toggle():在原始尺寸和当前尺寸之间切换图片尺寸。
  • reset():重置图片到元素状态。
  • destroy():销毁图片查看器实例。

事件

  • build.viewer:当图片查看器实例开始创建时触发。
  • built.viewer:当图片查看器实例被创建之后触发。
  • show.viewer:当图片查看器元素开始显示时触发。仅在模态窗口模式有效。
  • shown.viewer:当图片查看器元素显示之后触发。仅在模态窗口模式有效。
  • hide.viewer:当图片查看器元素开始隐藏时触发。仅在模态窗口模式有效。
  • hidden.viewer:当图片查看器元素隐藏之后触发。仅在模态窗口模式有效。

No conflict

如果你使用了和这个图片查看器具有相同名称空间的其它插件,可以通过$.fn.viewer.noConflict方法来恢复它。

  1. <script src="other-plugin.js"></script>
  2. <script src="viewer.js"></script>
  3. <script>
  4. $.fn.viewer.noConflict();
  5. // Code that uses other plugin's "$().viewer" can follow here.
  6. </script>

复制代码

浏览器兼容

  • Chrome (latest 2)
  • Firefox (latest 2)
  • Internet Explorer 8+
  • Opera (latest 2)
  • Safari (latest 2)

本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/jQuery/Image-Effects/201509032517.html

jQuery功能强大的图片查看器插件的更多相关文章

  1. 分享一款强大的图片查看器插件,手机PC 通吃,功能超级齐全!

    一款强大的图片查看器插件,手机PC 通吃,功能超级齐全! 地址:http://photoswipe.com/

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

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

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

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

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

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

  5. angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)

    笔记: angularjs1 制作自定义图片查看器(可旋转.放大.缩小.拖拽) 2018-01-12 更新  可以在我的博客  查看我 已经封装好的 纯 js写的图片查看器插件    博客链接 懒得把 ...

  6. 网页中的图片查看器viewjs使用

    需求分析: 对于网页中的图片进行连续放大(便于用户清晰查看内容).缩小,旋转等操作,可以使用viewjs图片查看器插件实现. viewjs官方网址:https://github.com/fengyua ...

  7. vue图片查看器

    vue 安装图片查看器插件安装cnpm install v-viewer引用 import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewe ...

  8. 插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...

  9. 发布两款JQ小插件(图片查看器 + 分类选择器),开源

    图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...

随机推荐

  1. jenkins配置发送邮件

    1.打开系统管理->系统设置,找到邮件设置,如下: 2.SMTP或者其他方式的发送邮件,可自行配置,一下列出了qq邮箱和163邮箱设置的地方,如下图: qq邮箱: 往下拉,找到如下图: 163邮 ...

  2. 开源编辑器ueditor

    http://ueditor.baidu.com/website/onlinedemo.html

  3. 【CF1016B】Segment Occurrences(模拟)

    题意:给定两个串s和t,多次询问s的一个区间[l ,r]中有多少个子串与t串相同 len<=1e3,q<=1e5 思路:前缀和 #include<cstdio> #includ ...

  4. 【BZOJ4945&&UOJ317】游戏(2-sat,拓扑序)

    题意: 思路: 输出方案时有一个优秀的性质可以利用: tarjan缩点之后点所属的分量编号是原图的反的拓扑序 所以只需要在两种方案内找到所属分量编号较小的那个就行了,用来满足(i,i')那个限制 #i ...

  5. C#.net制作验证码(英文与数字组成的4位随机数),以及MD5值的使用

    原文发布时间为:2008-09-22 -- 来源于本人的百度文章 [由搬家工具导入] 参考资料:http://www.cnblogs.com/gwazy/articles/139510.html 三个 ...

  6. 查看公网IP信息的方法

    有时候我们想知道自己的外网ip,推荐几个好用的方法 windows 用百度搜索“ip”就会显示 用浏览器访问getip.name 或者 ifconfig.me linux 使用curl命令  curl ...

  7. babel ---- presets字段设定转码规则

    presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装. # ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # re ...

  8. jQuery使用on()绑定动态生成元素的事件无效

    jquery on()方法是jquery1.7+后才使用的 由于需求:动态添加了以下代码 <tr class="pj" data-val="no"> ...

  9. Maven的构建配置文件(Build Profiles)

    在命令行使用构建配置文件时,是-P,比如:mvn -Pinput 注意:这里的构建配置文件并不是一个真正的文件,而是通过指定参数来做特定的事. 以下内容引用自https://ayayui.gitboo ...

  10. java计算年龄

    精确到天计算年龄 public static int getAgeByCardId(String card) throws Exception { Integer len = card.length( ...