图像浏览viewer(支持触摸、移动、缩放、旋转、键盘)
11 1 655 0

(1)简单示例


html代码

引入css
<link rel="stylesheet" href="css/viewer.css">

<ul class="photos clearfix">
    <li><img data-original="images/1.png" src="images/1s.png" alt="宝马"></li>
    <li><img data-original="images/2.png" src="images/2s.png" alt="跑车"></li>
    <li><img data-original="images/3.png" src="images/3s.png" alt="玛莎拉蒂"></li>
    <li><img data-original="images/4.png" src="images/4s.png" alt="保时捷"></li>
    <li><img data-original="images/5.png" src="images/5s.png" alt="冰山"></li>
    <li><img data-original="images/6.png" src="images/6s.png" alt="街角"></li>
</ul>

注意:一般src用来存放缩略图,data-original用来存放原图(只需要在配置的时候,将url设为data-original即可),alt则为显示的标题,


js代码

引入js
<script src="js/viewer.js"></script>

$(function () {
	  'use strict';
	  var console = window.console || { log: function () {} };
	  var $images = $('.photos');
	  var options = {
	    //inline: true,
		//toolbar: 3,
	    url: 'data-original',
	  };
	
	  $images.on({
	    ready:  function (e) {
	      console.log(e.type);
	    },
	    show:  function (e) {
	      console.log(e.type);
	    },
	    shown:  function (e) {
	      console.log(e.type);
	    },
	    hide:  function (e) {
	      console.log(e.type);
	    },
	    hidden: function (e) {
	      console.log(e.type);
	    },
	    view:  function (e) {
	      console.log(e.type);
	    },
	    viewed: function (e) {
	      console.log(e.type);
	    }
	 }).viewer(options);
});


(2)配置


名称
类型默认值描述
backdrop布尔型true是否开启遮罩层,就是放大图像以后的黑色背景
button布尔型true放大图像后,右上角的关闭按钮是否显示,默认是true显示
navbar布尔值/整型true放大图像后,是否显示底部缩略图导航,默认是true显示
title布尔值/整型/函数/数组true

放大图像后,是否显示图片的标题,就是alt里面的值

选项:

0或false:隐藏标题

1或true或Function或Array:显示标题

2:仅在屏幕宽度大于768像素时显示标题

3:仅在屏幕宽度大于992像素时显示标题

4:仅在屏幕宽度大于1200像素时显示标题

Function:自定义标题内容

[Number, Function]:第一个元素指示可见性,第二个元素自定义标题内容


toolbar布尔值/整型/对象true

工具栏

选项:

0或false:隐藏工具栏。

1或true:显示工具栏。

2:仅在屏幕宽度大于768像素时显示工具栏。

3:仅在屏幕宽度大于992像素时显示工具栏。

4:仅在屏幕宽度大于1200像素时显示工具栏。

{ key: Boolean | Number }:显示或隐藏工具栏。

{ key: String }:自定义按钮的大小。

{ key: Function }:自定义按钮的点击处理程序。

{ key: { show: Boolean | Number, size: String, click: Function }:自定义按钮的每个属性。


总共有10个键值:

(1)zoomIn(放大) 

(2)zoomOut(缩小)

(3)oneToOne(1:1重置)

(4)prev(上一张)

(5)play(播放),size选项有small(小)、medium(中,默认)、large(大)

(6)next(下一张)

(7)rotateLeft(从右向左旋转)

(8)rotateRight(从左向右旋转)

(9)flipHorizontal(左右翻转)

(10)flipVertical(上下翻转)


举例说明

toolbar: {

  zoomIn: true,//总会显示放大按钮

  zoomOut: false | 4,//屏幕大于1200px才显示缩小按钮

  oneToOne: false | 3,//屏幕大于992px才显示重置按钮

  prev: true,//总会显示上一张按钮

  play: {

    show: false | 2,//大于768px显示播放按钮

    size: 'small',//播放按钮是小,分为small(小)、medium(中默认项)、large(大)

  },

  next: true,//总会显示上一张按钮

  rotateLeft: true,//总会显示从右到左旋转

  rotateRight: true,//总会显示从左到右旋转

  flipHorizontal: true,//总会显示左右翻转

  flipVertical: false | 2,//屏幕大于768px才显示上下翻转

},




className字符串
“” 添加到viewer根节点的类名
container元素或者字符串body

将view打开放在哪个容器里面

仅在inline=false时才能用。

filter函数null

过滤图像

new Viewer(image, {  

filter(image) {    return image.complete;
 },
});

理应返回true

 

fullscreen布尔型true播放时是否全屏,默认全屏播放
initialViewIndex整型0定义要查看的图像的初始索引。
inline布尔型false启用串联模式
interval整型5000播放间隔,单位为毫秒
keyboard布尔型true启用键盘支持
loading布尔型true是否在加载图像时显示加载微调器
loop布尔型true是否启用循环查看
minWidth整型200

查看器的最小宽度

仅在inline=true时才能用 

minHeight整型100

查看器的最小高度

仅在inline=true时才能用  

movable布尔型true启动移动图像
rotatable布尔型true是否可旋转
scalable布尔型true是否启用上下和左右翻转
zoomable布尔型true是否启用放大和缩小
zoomOnTouch布尔型true通过在触摸屏上拖动来启用缩放当前图像
zoomOnWheel布尔型true可通过鼠标滚轮缩放图像

slideOnTouch
布尔型true通过在触摸屏上滑动,可以滑动到下一张或上一张图像
toggleOnDblclick布尔型true是否在双击图像时在图像的自然尺寸和初始尺寸之间切换图像尺寸
tooltip布尔型true放大或缩小时,以图像比率(百分比)显示工具提示
transition布尔型true为某些特殊元素启用CSS3过渡
zIndex整型2015z-index在模式模式下定义查看器的CSS 值
zIndexInline整型0z-index在串联模式下定义查看器的CSS 值
zoomRatio整型0.1通过滚轮鼠标缩放图像时定义比例
minZoomRatio整型0.01定义缩小时图像的最小比例
maxZoomRatio整型100定义放大时图像的最大比例
url字符串/函数src定义从何处获取原始图像URL进行查看
ready函数nullready事件的快捷方式
show
函数nullshow事件的快捷方式
shown函数nullshown事件的快捷方式
hide函数nullhide事件的快捷方式
hidden函数nullhidden事件的快捷方式
view
函数nullview事件的快捷方式
viewed函数nullviewed事件的快捷方式
zoom函数nullzoom事件的快捷方式
zoomed函数nullzoomed事件的快捷方式


(3)方法

1、show() 显示

2、hide() 隐藏

3、view(index) 查看

viewer.view(2); // 查看第三张图

4、prev() 上一张

5、next() 下一张

6、move(offsetX[, offsetY]) 水平方向移动

viewer.move(1);
viewer.move(-1, 0);//向左移动
viewer.move(1, 0);//向右移动
viewer.move(0, -1);//向上移动
viewer.move(0, 1);//向下移动

7、moveTo(x [,y]) 将图像移到绝对点

8、zoom(ratio [,hasTooltip])以相对比例缩放图像

viewer.zoom(0.1);
viewer.zoom(-0.1);

9、zoomTo(ratio[, hasTooltip])将图像缩放到绝对比例

viewer.zoomTo(0);
viewer.zoomTo(1);

10、rotate(degree)相对旋转图像

viewer.rotate(90);//旋转90度

11、rotateTo(degree)

viewer.rotateTo(0); 
viewer.rotateTo(360);

12、scale(scaleX[, scaleY])

viewer.scale(-1);//水平和垂直翻转
viewer.scale(-1, 1);//水平翻转
viewer.scale(1, -1);//上下垂直翻转


13、scaleX(scaleX)

viewer.scaleX(-1);左右水平翻转

14、scaleY(scaleY)

viewer.scaleY(-1);//上下垂直翻转

15、play([fullscreen])

viewer.play(true);//全屏播放
viewer.play(false);//不全屏播放

16、stop() 停止

17、full()

18、exit()

19、tooltip()

20、toggle()

21、reset() 重启

22、update() 更新

23、destroy() 销毁





详细可以参见:

GitHub:https://github.com/fengyuanchen/viewerjs





评论(0) 帮助他人、分享经验 我要评论
上传时间: 2020-04-08
分类: 代码 插件
文件大小: 5.62 MB
收藏
下载
有侵犯版权请及时联系我们,我们将在24小时内删除素材。
投诉举报
请在Safari浏览器下载