图片预览插件viewer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<link type="text/css" rel="stylesheet" href="../viewer/viewer.min.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="../viewer/bootstrap.min.js"></script>
<script type="text/javascript" src="../viewer/viewer.min.js"></script>
<script type="text/javascript">
$(function() {
$('.image').viewer();
function cli() {
$(".image").attr("src", "../images/20190512_201319_4.png");
$(".image").click();
}
$("#viewImg").click(function() {
cli();
})
})
</script>
</head>
<body>
<img class="image" alt="Picture" src="" style="display: none;">
<a id="viewImg" href="javascript:void(0)" target="_blank" rel="external nofollow" >预览图片</a>
</body>
</html>
点击a标签，效果如下
