KISSY.add("mui/detail-review/mallphotos", function(e, t, a, r, i, s) {
    var n = ".",
        l = "",
        o = e.all,
        c, d = false;
    var u = {};
    var v = {};
    e.mix(v, {
        init: function(a, i) {
            c = this;
            c.el = t.get(a);
            if (!e.isArray(i)) return;
            var s = new r(f()).render(p(i));
            c.el.innerHTML = s;
            h()
        },
        run: function(e, r) {
            c = this;
            h(t.get(e));
            a.fire(r, "click")
        }
    });

    function f() {
        return '<p class="tm-m-photos"><ul class="tm-m-photos-thumb">    {{#each pics}}    <li  src="{{this}}_400x400.jpg" >        <img src="{{this}}_40x40.jpg"> <b class="tm-photos-arrow"></b>    </li>    {{/each}}</ul><p class="tm-m-photo-viewer" style="width:400px;height:400px;"><img src=""></p></p>'
    }
    function p(e) {
        return {
            pics: e
        }
    }
    function h(r) {
        c.viewer = t.get(".tm-m-photo-viewer", r);
        var i = t.query("li", r);
        e.each(i, function(s, n) {
            a.on(s, "click", function(a) {
                e.log(t.attr(this.l, "src"));
                var r = t.css(this.v, "display");
                var s = !t.equals(t.get(this.l), t.get(".tm-current", this.e));
                if (r === "none" || s) {
                    r = g(t.attr(this.l, "src"), this.v);
                    t.removeClass(i, "tm-current");
                    t.addClass(this.l, "tm-current")
                } else {
                    r = m(this.v, i)
                }
            }, {
                v: c.viewer,
                l: s,
                e: r
            })
        });
        a.on(c.viewer, "click", function(e) {
            if (e.target.tagName.toUpperCase() != "I" && e.target.tagName.toUpperCase() != "A") {
                m(this.v, i)
            }
        }, {
            v: c.viewer
        });
        if (e.UA.ie && parseInt(e.UA.ie) < 8 || o(c.viewer).prev().children().length < 2) {
            o(c.viewer).all("a").remove()
        } else {
            var s = t.query("a", c.viewer);
            a.on(s, "click", function(e) {
                var a = t.query(this),
                    r = t.parent(a);
                y(r, a)
            });
            a.on(s, "mouseenter", function(e) {
                var t = o(this),
                    a = t.parent().prev(),
                    r = a.one(".tm-current").index(),
                    i = t.index();
                if (i == 1 && r == 0 || i > 1 && r == a.children().length - 1) {
                    t.css("cursor", "default").one("i").hide()
                } else {
                    if (d) {
                        var s = t.height() / 2 - 10;
                        t.css("cursor", "pointer").one("i").css("top", s).show()
                    }
                }
            });
            a.on(s, "mouseleave", function(e) {
                o(this).one("i").hide()
            })
        }
    }
    function g(e, a) {
        s.gm("8.2.7");
        var r = 410,
            n = 410;
        var l = function() {
                t.attr(t.get("img", a), "src", e);
                t.css(a, {
                    display: "block",
                    width: 400,
                    height: 400
                });
                t.css(t.get("img", a), {
                    width: 400
                })
            };
        s.loadImage(e, function(s) {
            if (s.width > n || s.height > r) {
                l();
                d = true
            } else {
                t.attr(t.get("img", a), "src", e);
                new i(a, {
                    display: "block",
                    width: s.width + 2,
                    height: s.height + 2
                }, .25, "linear", function() {
                    d = true;
                    var e = o(a).all("a");
                    e.css("width", o(a).width() / 3)
                }).run();
                new i(t.get("img", a), {
                    width: s.width + 2,
                    height: s.height + 2
                }, .25, "linear", function() {}).run()
            }
        }, function(e) {
            l()
        });
        return true
    }
    function m(e, a) {
        new i(e, {
            display: "none",
            width: 0,
            height: 0
        }, .5, "linear", function() {
            d = false
        }).run();
        t.removeClass(a, "tm-current");
        return false
    }
    function y(e, a) {
        var e = o(e),
            a = o(a),
            r = e.prev(),
            n = r.one(".tm-current"),
            l = a.index(),
            c = l == 2 ? n.next() : n.prev();
        if (c) {
            var d = c.index(),
                u = c.attr("src");
            n.removeClass("tm-current");
            c.addClass("tm-current");
            s.loadImage(u, function(s) {
                e.one("img").attr("src", u);
                new i(e, {
                    display: "block",
                    width: s.width + 2,
                    height: s.height + 2
                }, .25, "linear", function() {
                    a.css("width", e.width() / 3)
                }).run();
                if (l == 1 && d == 0 || l == 2 && d == r.children().length - 1) {
                    a.css("cursor", "default").one("i").hide()
                } else {
                    var n = (s.height + 6) / 2 - 10;
                    a.show();
                    new i(a.css("cursor", "pointer").one("i"), {
                        top: n
                    }, .2, "linear", function() {}).run()
                }
                new i(t.get("img", e), {
                    width: s.width + 2,
                    height: s.height + 2
                }, .25, "linear", function() {}).run()
            })
        }
    }
    return v
}

I want to use this image in the htm file to click on the enlarged js, and then use this code directly in the htm

<p class="tm-m-photos"><ul class="tm-m-photos-thumb">    {{#each pics}}    <li  src="{{this}}_400x400.jpg" >        <img src="{{this}}_40x40.jpg"> <b class="tm-photos-arrow"></b>    </li>    {{/each}}</ul><p class="tm-m-photo-viewer" style="width:400px;height:400px;"><img src=""></p></p>

How to use this together? Use the above code directly in htm, and then call this js