viewer插件查看图片

// 当前js用于查看图片,在页面中添加如下div
// <div id="imgShow" style="width: 0px;height: 0px;opacity: 0;cursor:pointer;"tabindex="-2">var viewer;// 显示以 ;, 或 ,为分割符的图片
function showImgs(value) {if(DealValue(value) == ''){swal("当前数据未上传图片！");return;}var imgss = value.replaceAll(";","").split(',');$("#imgShow").html("");var _html = "";_html += "<ul class='pictures'>";for(var i =0;i < imgss.length;i++){_html+="<li><img data-original='"+cms.util.uploadImagePath+imgss[i]+"' src='"+cms.util.uploadImagePath+imgss[i]+"'></li>";}_html += "</ul>";$("#imgShow").html(_html);var imgShow = document.getElementById('imgShow');viewer = new Viewer(imgShow, {url: 'data-original',title: function (image) {return image.alt + ' (' + (this.index + 1) + '/' + this.length + ')';},hidden: function () {viewer.destroy();},hide: function () {viewer.destroy();}});viewer.show();
}// 参数中含有半角双引号时，转义处理
// function EscapeChar(haveSpecialval) {
//     return haveSpecialval.replace(/\"/g, """);
// }
// jsonArray 数组图片  显示, 传入参数前需调用EscapeChar()进行""转义
function showImgs3(value) {if(DealValue(value) == ''){swal("该数据未上传图片！");return;}var imgss = eval('(' + value + ')');$("#imgShow").html("");var _html = "";_html += "<ul class='pictures'>";for(var i =0;i < imgss.length;i++){_html+="<li><img data-original='"+cms.util.uploadImagePath+imgss[i].url+"' src='"+cms.util.uploadImagePath+imgss[i].url+"'></li>";}_html += "</ul>";$("#imgShow").html(_html);var imgShow = document.getElementById('imgShow');viewer = new Viewer(imgShow, {url: 'data-original',title: function (image) {return image.alt + ' (' + (this.index + 1) + '/' + this.length + ')';},hidden: function () {viewer.destroy();},hide: function () {viewer.destroy();}});viewer.show();
}

viewer插件查看图片相关推荐

html页面点击图片名称查看图片------图片预览插件viewer.js使用
前言在做项目时,会遇到在前台展示附件详情,比如图片,word,pdf等.viewer.js 图片查看器,用来查看页面中的图片. 基本效果: Viewer.js的使用这是一个github工程,功能很 ...
图片浏览插件(支持图片轮播、上下张查看、放大缩小、旋转)
应用场景: 在页面上显示图片,但图片太小,不方便观看. 在页面展示的原图: 使用插件查看的效果图: 主要功能: 支持选项支持方法支持事件支持触摸支持移动支持缩放支持旋转支持键盘跨浏览 ...
仿微信查看图片、H5的图片轮播插件PhotoSwipe、SuperSlide
刚好有项目需求,也整理了几款H5的插件一.PhotoSwipe 仿微信查看图片,两指放大缩小,左右滑动切换上下一张图片. 二.PhotoSwipe的改良版三.SuperSlider基础版多种图片 ...
server2016 查看图片预览图片
server2016 查看图片 1.使用win+R快捷键快速打开运行,输入regedit打开注册表 2.在注册表中找到HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Win ...
[转]mpvue中的小程序调用系统自带查看图片的功能
mpvue中的小程序调用系统自带查看图片的功能这里举个栗子: <template><div class="keting"><div class=&q ...
ecshop图片自动本地化插件,ECSHOP下载商品图片,ECSHOP商品详情远程图片,ecshop商品远程图片保存,ecshop图片自动本地化插件,商品图片本地化
ecshop图片自动本地化插件,ECSHOP下载商品图片,ECSHOP商品详情远程图片,ecshop商品远程图片保存,ecshop图片自动本地化插件,商品图片本地化,图片远程本地化插件,ecshop远 ...
【若依(ruoyi)】点击图标查看图片
前言若依(ruoyi): v4.3 点击图标查看图片使用 layer 实现.若依(ruoyi) v4.3 中带来 layer 插件,直接使用即可. html 代码 <div class=&q ...
点击查看图片---弹窗直接显示图片并带关闭按钮
做项目,有时候查看图片要直接跳转到一个新的页面,在显示图片.这样用户体验效果不好. 采用该方法,直接在当前页面分层弹窗并显示图片,体验效果大大提升! 采用Magnific Popup – 响应式 jQ ...
FCPX插件平面图片转三维空间动画 PRODEPTH
PRODEPTH 是一款由Pixel Film Studios 公司出品的平面图片转三维空间动画插件,ae软件中非常火的图片转三维空间动画效果,现在FCPX软件也可以实现啦,那就就是通过使用prode ...

viewer插件查看图片

viewer插件查看图片相关推荐

最新文章

热门文章