首页 前端知识 jquery-viewer(Viewer.js)—— 一个 jQuery 图片展示插件

jquery-viewer(Viewer.js)—— 一个 jQuery 图片展示插件

2024-06-07 12:06:50 前端知识 前端哥 608 489 我要收藏

用法:

<link  href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>

new Viewer(element[, options])   【element: HTMLElement类型,可以是img元素或包含img的元素

详细见: https://github.com/fengyuanchen/viewerjs/blob/main/README.md

官网展示效果:https://fengyuanchen.github.io/viewerjs/

 

 最简单的用法:

    function UploaderShowGridFileEx(currentIndex, img) {
        $("#UploaderHiddenImg").remove();
        if (img.length > 0) {
            $("body").append('<div id="UploaderHiddenImg" style="display:none;"></div>');
            $.each(img, function (index, value) {
                $("#UploaderHiddenImg").append('<img src="' + value.Url + '" alt="' + value.Alt + '"/>');
            });
            var viewer = new Viewer(document.getElementById('UploaderHiddenImg'), {
                initialViewIndex: currentIndex,
                hidden: function () {
                    viewer.destroy();
                    $("#UploaderHiddenImg").remove();
                }
            });
            viewer.show();
        }
    }

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11219.html
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!