多图片预览

灶水

已于 2024-03-22 08:43:24 修改

阅读量26

点赞数

文章标签： javascript

于 2023-01-04 10:54:23 首次发布

本文链接：https://blog.csdn.net/qq_60521457/article/details/128544535

版权

两个网站：

Viewer

viewer/README.md at master · fengyuanchen/viewer · GitHub

//预览单个图片
function imgchilck(obj) {
        var galley = document.getElementById('galley');
        top.image = new top.Image();
        top.image.src = obj.src;
        top.viewer = new top.Viewer(  top.image, {
            url: 'data-original',
            hidden: function () {
                top.viewer.destroy();
            },
        });
        top.viewer.show();
    }
//预览全部图片
    function imgchilck(obj) {


        top.$("#img_view123").html("")
        var $div = top.$("<div>").attr("id", "img_view123").css("display", "none");

        debugger

        var cIds = $(obj).attr("id")
        var cId = parseInt(cIds.substring(cIds.length - 1));
        var cIdx = 0;

        $("img").each(function (idx, img) {

            var $img = top.$(img.outerHTML);

            var imgId = $img.attr("id")
            var ingidx = parseInt(imgId.substring(imgId.length - 1))
            if (ingidx == cIds) {
                cIdx = idx;
            }

            $img.addClass("tk22");
            $div.append($img);
        });

        top.$("div:first").append($div);

        var imgs = top.document.getElementById("img_view123");

        console.log($(imgs).html());

        var aa = $div[0];

        top.viewer = new top.Viewer(aa, {
            url: 'data-original',
            hidden: function () {
                top.viewer.destroy();
            },
        });
        top.viewer.view(cIdx);
        top.viewer.show();
    }