viewer.js预览图片插件使用

最新推荐文章于 2024-09-26 10:02:29 发布

Tlimited

最新推荐文章于 2024-09-26 10:02:29 发布

阅读量1w

点赞数 5

分类专栏： js java

本文链接：https://blog.csdn.net/u014204541/article/details/90715307

版权

java 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

参考学习链接：
https://www.jqhtml.com/6750.html
官方文档及其插件下载链接：
https://github.com/fengyuanchen/viewerjs#options
使用步骤：
导入文件，js版，不需要导入其他的了

<link rel="stylesheet" href="${ctx}/plug-in/viwer/css/viewer.min.css">
<script src="${ctx}/plug-in/viwer/js/viewer.min.js"></script>

<div id="mypic">
  
</div>
 <script type="text/javascript">
 $(document).ready(function(){
 });
 //单张图片预览
 function picView(id,name){
	 $("#mypic").empty();//每次进来都清空div
	 console.log(id)//传入的id
	 console.log(name)
	 //动态生成图片标签
	var pic = "<img id='"+id+"' src='attachmentController.do?picPreview&id="+id+"'alt='"+name+"'>";
	//追加到div中
	 $("#mypic").append(pic);
	//动态加入预览功能中
	var viewer = new Viewer(document.getElementById(id),{toolbar:{
	    zoomIn: 4,
	    zoomOut: 4,
	    oneToOne: false,
	    reset: false,
	    prev: false,
	    play: {
	      show: 4,
	      size: 'large',
	    },
	    next: false,
	    rotateLeft: false,
	    rotateRight: false,
	    flipHorizontal: 4,
	    flipVertical: 4,
	  },
	  });
	//代码触发图片标签的点击功能
    $("#"+id).click();
 }

前端小案例
通过点击按钮触发预览的做法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link  href="css/viewer.min.css" rel="stylesheet">
<script src="js/viewer.min.js"></script>
<style>
* { margin: 0; padding: 0;}
#jqhtml { width: 700px; margin: 0 auto; font-size: 0;}
#jqhtml li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#jqhtml li img { width: 100%;}
</style>
</head>

<body>
<h1>默认效果</h1>

<div>
  <img id="image"  src="http://tu.qt3191.com/120512/2010112855795625.jpg" alt="Picture">
   <img id="image2"  src="img/thumbnails/tibet-6.jpg" alt="Picture">
   
   <input type="button" value="展示图片1" onclick="my()"/>
   <input type="button" value="展示图片2" onclick="my2()"/>
</div>
<script src="js/viewer.min.js"></script>
<script type="text/javascript">


function my(){
		console.log("ddd")	
		var viewer = new Viewer(document.getElementById('image'));
	document.getElementById('image').click();
}
function my2(){
		console.log("1ddd")	
		var viewer = new Viewer(document.getElementById('image2'),{toolbar:{
	    zoomIn: 4,
	    zoomOut: 4,
	    oneToOne: false,
	    reset: false,
	    prev: false,
	    play: {
	      show: 4,
	      size: 'large',
	    },
	    next: false,
	    rotateLeft: false,
	    rotateRight: false,
	    flipHorizontal: 4,
	    flipVertical: 4,
	  }
	  });
	document.getElementById('image2').click();
}
</script>


</body>
</html>

效果：
在这里插入图片描述
jquery版使用：

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>JS/jQuery图片查看器viewer.js演示-jQuery版本</title>
<link rel="stylesheet" href="css/viewer.min.css">
<style>
* { margin: 0; padding: 0;}
#jqhtml { width: 700px; margin: 0 auto; font-size: 0;}
#jqhtml li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#jqhtml li img { width: 100%;}
</style>
</head>

<body>
<h1>jQuery版本</h1>

<ul id="jqhtml">
	<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>

<script src="js/jquery.min.js"></script>
<script src="js/viewer-jquery.min.js"></script>
<script>
$(function() {
	$('#jqhtml').viewer({
		url: 'data-original',
		toolbar:{
	    zoomIn: 4,
	    zoomOut: 4,
	    oneToOne: false,
	    reset: false,
	    prev: false,
	    play: {
	      show: 4,
	      size: 'large',
	    },
	    next: false,
	    rotateLeft: false,
	    rotateRight: false,
	    flipHorizontal: 4,
	    flipVertical: 4,
	  }
	});
});
</script>

回调函数：

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>JS/jQuery图片查看器viewer.js演示-回调函数</title>
<link rel="stylesheet" href="css/viewer.min.css">
<style>
* { margin: 0; padding: 0;}
#jqhtml { width: 700px; margin: 0 auto; font-size: 0;}
#jqhtml li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#jqhtml li img { width: 100%;}
</style>
</head>

<body>
<h1>回调函数</h1>

<ul id="jqhtml">
	<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>

<script src="js/viewer.min.js"></script>
<script>
var viewer = new Viewer(document.getElementById('jqhtml'), {
	url: 'data-original',

	build: function() {
		alert('build');
	},

	built: function() {
		alert('built');
	},

	show: function() {
		alert('show');
	},

	shown: function() {
		alert('shown');
	},

	hide: function() {
		alert('hide');
	},

	hidden: function() {
		alert('hidden');
	},

	view: function() {
		alert('view');
	},

	viewed: function() {
		alert('viewed');
	}
});
</script>

自定义方法的：

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>JS/jQuery图片查看器viewer.js演示-自定义方法</title>
<link rel="stylesheet" href="css/viewer.min.css">
<style>
* { margin: 0; padding: 0;}
#jqhtml { width: 700px; margin: 0 auto; font-size: 0;}
#jqhtml li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#jqhtml li img { width: 100%;}

.btns { position: relative; z-index: 10000; width: 700px; margin: 0 auto; text-align: center;}
.btns a { display: inline-block; width: 70px; margin-top: 15px; line-height: 26px; font-size: 12px; color: #fff; background-color: #21b384; text-decoration: none;}
.btns a:hover { background-color: #1fa67a;}
</style>
</head>

<body>
<h1>自定义方法</h1>

<ul id="jqhtml">
	<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>

<div class="btns">
	<a id="btn1" href="javascript:">show()</a>
	<a id="btn2" href="javascript:">hide()</a>
	<a id="btn3" href="javascript:">view()</a>
	<a id="btn4" href="javascript:">next()</a>
	<a id="btn5" href="javascript:">prev()</a>
	<a id="btn6" href="javascript:">move()</a>
	<a id="btn7" href="javascript:">moveTo()</a>
	<a id="btn8" href="javascript:">zoom()</a>
	<a id="btn9" href="javascript:">zoomTo()</a>
	<a id="btn10" href="javascript:">rotate()</a>
	<a id="btn11" href="javascript:">rotateTo()</a>
	<a id="btn12" href="javascript:">scale()</a>
	<a id="btn13" href="javascript:">scaleX()</a>
	<a id="btn14" href="javascript:">scaleY()</a>
	<a id="btn15" href="javascript:">play()</a>
	<a id="btn16" href="javascript:">stop()</a>
	<a id="btn17" href="javascript:">full()</a>
	<a id="btn18" href="javascript:">exit()</a>
	<a id="btn19" href="javascript:">tooltip()</a>
	<a id="btn20" href="javascript:">toggle()</a>
	<a id="btn21" href="javascript:">reset()</a>
	<a id="btn22" href="javascript:">destroy()</a>
</div>

<script src="js/viewer.min.js"></script>
<script>
var viewer = new Viewer(document.getElementById('jqhtml'), {
	url: 'data-original'
});

document.getElementById('btn1').onclick = function() {
	viewer.show();
}

document.getElementById('btn2').onclick = function() {
	viewer.hide();
}

document.getElementById('btn3').onclick = function() {
	viewer.view(5);
}

document.getElementById('btn4').onclick = function() {
	viewer.next();
}

document.getElementById('btn5').onclick = function() {
	viewer.prev();
}

document.getElementById('btn6').onclick = function() {
	viewer.move(-10, 0);
}

document.getElementById('btn7').onclick = function() {
	viewer.moveTo(0, 0);
}

document.getElementById('btn8').onclick = function() {
	viewer.zoom(0.1);
}

document.getElementById('btn9').onclick = function() {
	viewer.zoomTo(1);
}

document.getElementById('btn10').onclick = function() {
	viewer.rotate(90);
}

document.getElementById('btn11').onclick = function() {
	viewer.rotateTo(180);
}

document.getElementById('btn12').onclick = function() {
	viewer.scale(-1);
}

document.getElementById('btn13').onclick = function() {
	viewer.scaleX(-1);
}

document.getElementById('btn14').onclick = function() {
	viewer.scaleY(-1);
}

document.getElementById('btn15').onclick = function() {
	viewer.play();
}

document.getElementById('btn16').onclick = function() {
	viewer.stop();
}

document.getElementById('btn17').onclick = function() {
	viewer.full();
}

document.getElementById('btn18').onclick = function() {
	viewer.exit();
}

document.getElementById('btn19').onclick = function() {
	viewer.tooltip();
}

document.getElementById('btn20').onclick = function() {
	viewer.toggle();
}

document.getElementById('btn21').onclick = function() {
	viewer.reset();
}

document.getElementById('btn22').onclick = function() {
	viewer.destroy();
}
</script>