zoom image filling screen

by ozzan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">Loading</div>
<div id="zoom"></div>

CSS

#zoom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    display: none;
}

#zoom img {
    width: 200%;
    height: 100%;
    height: auto;
    position: absolute;
    cursor: crosshair;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    margin: 0;
}

* {
    box-sizing: border-box;
}

JavaScript

var Zoom = function(imageZoom) {
    this.urlImage = imageZoom;
    this.img = undefined;
    this.$img = undefined;

    this.init = function() {
        this.loaders("on");
        this.calcs();
    };
    this.calcs = function() {
        var self = this;
        this.img = new Image();
        this.img.onload = function() {
            self.build();
        };
        this.img.src = this.urlImage;
    };
    this.loaders = function(status) {
        switch (status) {
            case "on":
                $('#loader').fadeIn(200);
                break;
            case "off":
                $('#loader').fadeOut(200);
                break;
        }
    };
    this.build = function() {
        var self = this;
        this.$img = $(self.img);

        $('#zoom').fadeIn(200).append(this.$img);

        if (self.$img.height() < self.$img.width())
            self.$img.css({
                width: "auto",
                height: "100%"
            });

        this.$img.on('mousedown', function(e) {
            e.preventDefault();
        });

        // this is the problematic function
        $('body').on('mousemove', function(e) {
            e.preventDefault();

            var wx = $(window).width();
            var wy = $(window).height();

            var iy = self.$img.height();
            var ix = self.$img.width();

            var px = e.pageX;
            var py = e.pageY;

            var tx = -1 * (px / wx) * (ix - wx);
            var ty = -1 * (py / wy) * (iy - wy);

            self.$img.css({
                'transform': 'translate(' + tx + 'px, ' + ty + 'px)'
            });
        });
        self.loaders("off");
    };
};

var zoom = new Zoom("http://dummyimage.com/4200x900/000/fff");
//var zoom = new Zoom("http://192.163.220.111/~amonarra/_beta/uploads/img1_zoom.jpg");
zoom.init();