使用viewer实现图片预览

最近在做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' 表示在放大图片的urlnavbar:false  表示在放大图片的时候不展示下面的轮播预览图片

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

使用viewer实现图片预览相关推荐

Viewer.js 图片预览插件
一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片 ...
image viewer（图片预览）的具体实践
我们经常遇到,在手机浏览图片时,图片会进行放大.看起来的效果很舒服. 我们就来实践一番吧: 第一:引进css: <link rel="stylesheet" type=&qu ...
VUE图片预览放大缩小插件viewer
VUE图片预览放大缩小插件viewer 一.安装依赖 npm install v-viewer --save 二.main.js内引用并注册调用 //main.js import Viewer fro ...
强大的图片预览组件Viewer.js
1. Viewer.js简介 Viewer.js 是一款强大的图片查看器.我们通过Viewer.js 在页面上添加强大的图片查看功能,同时,这款优秀的插件配置操作起来也非常的方便. Viewer. ...
html页面点击图片名称查看图片------图片预览插件viewer.js使用
前言在做项目时,会遇到在前台展示附件详情,比如图片,word,pdf等.viewer.js 图片查看器,用来查看页面中的图片. 基本效果: Viewer.js的使用这是一个github工程,功能很 ...
Vue实现图片预览（Viewer.js）
Viewer.js viewer.js是一款开源的图片预览插件,功能十分强大: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动支持 ...
vue+vant使用图片预览功能ImagePreview的问题
如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图: 着实让员外百思不 ...
Windows系统SVG图片预览插件
由于工作中经常需要对组图查看和管理,而Windows系统不支持在文件夹下直接预览svg图片, HBuilderX 插件市场没有找到相应的svg插件,比较麻烦.经过查找,发现svg扩展插件(SVG Vi ...
Vue 动态加载public图片和图片预览例子
一.vue 静态资源文件夹 Vue 有两个存放静态资源的文件夹:assets和public. 1. assets文件夹使用require()方法加载静态资源,如: require('./assets ...
【VUE】图片预览放大缩小插件(推荐阅读)
From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...

使用viewer实现图片预览

使用viewer实现图片预览相关推荐

最新文章

热门文章