JSFiddle - React, Tailwind, and code Playground

by gordyr

HTML

<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<div id="container">
    <img id="image" width="640" height="480" src="http://blog.weflyspitfires.com/wp-content/uploads/2012/04/World-of-Wacraft-wallpaper.jpg"
    />
    <div id="zoom_wrapper">
        <div id="zoom"></div>
    </div>
</div>

CSS

#container {
    width:400px;
    height:300px;
    border:1px solid black;
    overflow:hidden;
    position:relative;
    background: #151515;
}
#zoom_wrapper {
    position:absolute;
    z-index:1;
    left:30px;
    top:30px;
}
#image {
    margin:auto;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

JavaScript

TEST = {
    prevscale: 1,
    scale: 1,
    container: $('#container'),
    zoomer: $('#zoom'),
    image: $('#image'),
    running: false,
    currentY: 0,
    targetY: 0,
    oldY: 0,
    maxScrollTop: 0,
    minScrollTop: null,
    direction: null,
    fricton: 0.9, // higher value for slower deceleration
    vy: 0,
    stepAmt: 10,
    minMovement: 0.05,
    ts: 0.1,
    scale: 1, // scale of the image
    xLast: 0, // last x location on the screen
    yLast: 0, // last y location on the screen
    xImage: 0, // last x location on the image
    yImage: 0, // last y location on the image
    prevscale: 1,
    init: function () {
        this.centreimage();
        this.initslider();
        this.initmousewheel();
    },
    centreimage: function () {

        var self = this;
        //set Image dimensions to max 90% of container
        var imageHeight = 480,
            imageWidth = 640,
            container = $('#container'),
            contWidth = self.container.width(),
            contHeight = self.container.height();

        var ratio = Math.min(contWidth * 0.9 / imageWidth, contHeight * 0.9 / imageHeight);

        self.image.css({
            'height': imageHeight * ratio + 'px',
                'width': imageWidth * ratio + 'px'
        });


    },
    initslider: function () {
        var self = this;
        self.zoomer.slider({
            orientation: 'vertical',
            min: 1,
            max: 10,
            step: 0.01
        })
            .on('slide slidechange', function (event, ui) {
            self.zoom(event, ui);
        });

    },
    initmousewheel: function () {
        var self = this;

        self.container.on('mousewheel', function (e, delta) {
            var offset = self.image.offset();
            self.mouseX = e.pageX - offset.left;
            self.mouseY = e.pageY - offset.top;

            self.prevscale = self.scale;

            // find current location on the image at the current scale
           ...