Pictures magnifying glass, small modifications html

<script src="jquery.min.js"></script>
<script type="text/javascript" src="blowup.min.js"></script>

<img id="chgImg" class="demo-img" src="https://www.spark-bearing.com/uploads/photo/s100/20170928/59ccb8d4d3fe9.JPG" width="760" style="cursor:pointer" />


<div class="zoom-small-image">
<img id="chgImg" src="https://www.spark-bearing.com/uploads/photo/s100/20170928/59ccb8d4d3fe9.JPG" width="760" style="cursor:pointer" />
</div>

<script type="text/javascript">
$(function(){

        var box = document.getElementsByClassName("zoom-small-image");
        if(box.length > 0){
            for (i = 0; i < box.length; i++) { 
                var imgs = box[i].getElementsByTagName("img")
                for (k = 0; k < imgs.length; k++) {
                    console.log(imgs[k]);
                    $(imgs[k]).blowup({
                        background : "#FCEBB6"
                    });
                }
             }
        }
        
            $(".demo-img").blowup({
                background : "#FCEBB6"
            });

        })
    </script>
<script>
    

    function bigimg(obj){
    var zoom = parseInt(obj.style.zoom,10)||100;
    console.log(zoom);
    zoom +=  event.wheelDelta / 12;
    if(zoom > 0 )
        obj.style.zoom=zoom+'%';
    return false;
}
</script>

// blowup.min.js
// Paul Krishnamurthy 2016
$(function (o) {
    o.fn.blowup = function (e) {
        var t = this;
        if (!t.is("img")) return void console.log("%c Blowup.js Error: %cTarget element is not an image.", "background: #FCEBB6; color: #F07818; font-size: 17px; font-weight: bold;", "background: #FCEBB6; color: #F07818; font-size: 17px;");
        var n = t.attr("src"),
            i = (t.width(), t.height(), new Image);
        i.src = t.attr("src");
        var r = {
                round: !0,
                width: 200,
                height: 200,
                background: "#FFF",
                shadow: "0 8px 17px 0 rgba(0, 0, 0, 0.2)",
                border: "6px solid #FFF",
                cursor: !0,
                zIndex: 999999
            },
            s = o.extend(r, e);
        t.on("dragstart", function (o) {
            o.preventDefault()
        }), t.css("cursor", s.cursor ? "crosshair" : "none");
        var d = document.createElement("div");
        d.id = "BlowupLens", o("body").append(d), $blowupLens = o("#BlowupLens"), $blowupLens.css({
            position: "absolute",
            visibility: "hidden",
            "pointer-events": "none",
            zIndex: s.zIndex,
            width: s.width *2.5,
            height: s.height *2.5,
            border: s.border,
            background: s.background,
            "border-radius": s.round ? "50%" : "none",
            "box-shadow": s.shadow,
            "background-repeat": "no-repeat"
        }), t.mouseenter(function () {
            $blowupLens.css("visibility", "visible")
        }), t.mousemove(function (o) {
			
            console.log("pppp" + s.width);
            console.log("kkk" + o.pageX);
            var e = o.pageX - s.width  / 2,
                r = o.pageY - s.height / 2,
                d = o.pageX - this.offsetLeft,
                a = o.pageY - this.offsetTop,
                u = -Math.floor(d / t.width() * i.width - s.width / 2) + t.width() + s.width * 4.1;
                h = -Math.floor(a / t.height() * i.height - s.height / 2) +  o.pageY + s.height *1.1;
				console.log(u );
            $blowupLens.css({
                left: e,
                top: r,
                "background-image": "url(" + n + ")",
                // "background-position": u + " " + h,
                
                "background-position" : u+"px" + " " + h+"px"
            })
        }), t.mouseleave(function () {
            $blowupLens.css("visibility", "hidden")
        })
    }
});

As blowup.min.js snippet