viewer插件查看图片

最新推荐文章于 2023-02-22 15:12:51 发布

w宁静致远

最新推荐文章于 2023-02-22 15:12:51 发布

阅读量514

点赞数

分类专栏：前端demo

本文链接：https://blog.csdn.net/wsh_ningjing/article/details/113240519

版权

前端demo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

// 当前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, "&#34;");
// }
// 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();
}