使用viewer实现图片预览_$().viewer-CSDN博客

本文链接：https://blog.csdn.net/qq_31450641/article/details/119739088

最近在做web端开发时，遇到需要实现图片预览插件，并且带有旋转，放大缩小功能，于是找到viewer插件，特此记录

需要现在官网下载viewer.min.css 、viewer.min.js和viewer-jquery.min.js，然后在页面中引入对应的css和js

html代码展示:

此处我是动态设置的，可以写个静态页面固定看效果也没问题

  //图片显示预览
	if(stuffix=="png" || stuffix=="jpg" || stuffix=="jpeg" || stuffix=="gif"){
		  arrayStr += '<span  style="margin-left:5px;"><img  imgId="'+attachFileId+'" class="attachedImg" src="/shr/addon/customer/web/js/ext/audit/images/yltp.jpg"  data-original="'+dataUrl+'"/></span>';
	}else if(stuffix=="pdf" ){
		  arrayStr += "<span style='margin-left:5px;'><a href='/shr/hragentAttachment.do?method=previewAttachment&attachId="+attachFileId+"&"+hragentParam+"' target='_blank'><img class='attachedPdf' src='/shr/addon/customer/web/image/file/pdf_ico.png'/></a></span>";
	}else{//其他的，直接显示下载按钮
		  arrayStr += "<span style='margin-left:5px;'><a class='icon-download-alt' href='/shr/hragentAttachment.do?method=download&attachId="+attachFileId+"&"+hragentParam+"' target='_blank'></a></span>";
	}

js绑定一个图片点击事件：

        //绑定图片的viewer点击事件，并设置放大的图片url
        $('#attachedFileTable .attachedImg').viewer({
             url: 'data-original',
             navbar:false
        });

 url: 'data-original' 表示在放大图片的url
 navbar:false  表示在放大图片的时候不展示下面的轮播预览图片

然后再初始化加载js就可以了