邯城往事

>>> 展颜笑夙愿,一笑泯恩仇 <<<

目录
jQuery图片查看器插件Viewer.js
/  

jQuery图片查看器插件Viewer.js

第一种使用方式:在html上写固定内容之后,再在js监听

<div id="img-box">
    <img data-original="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1391271859,1912216773&fm=55&app=54&f=JPEG?w=1140&h=640" src="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1391271859,1912216773&fm=55&app=54&f=JPEG?w=1140&h=640" alt="">
</div>
window.addEventListener('DOMContentLoaded', function () {
    var imgbox = document.getElementById('img-box');
    var viewer = new Viewer(imgbox, {
        url: 'data-original',
    });
});

第二种使用方式,实时创建dom对象展示图片:

//图片路径
var enterUrl = selected[0].enterUrl;
//资源图片数量
//var lessonCount = selected[0].lessonCount;
var lessonCount = 3;
if(lessonCount>0 && enterUrl != null){
    //jquery添加临时隐藏元素
    var form = $("<div id = 'img-box' style='display: none'></div>");
    for (let i = 0; i <= lessonCount; i++) {
        var mediaIP = Feng.mediaIP + enterUrl + "kng_" + i +".jpg";

        var input = $("+ mediaIP +" src="+ mediaIP +" alt=\"\">");
        form.append(input);
    }
    $(document.body).append(form);

    var hiddenImgbox = document.getElementById('img-box');
    var viewer = new Viewer(hiddenImgbox, {
        url: 'data-original',
    });
    viewer.destroy();
    viewer.view();
}else{
    Feng.info('无预览资源!');
    return false;
}

引入js和css

<link rel="stylesheet" href="${ctxPath}/static/css/plugins/viewer/viewer.css">
<script src="${ctxPath}/static/js/plugins/viewer/viewer.js"></script>
评论
取消