JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
<div id="ContentWrapper">
    <div id="Panel">
        <div id="TopWrapper">
            <div id="MainContent">
                <div id="ImageWrapper">
                    <img id="ZoomImage" src="http://placehold.it/200x50" />
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#ContentWrapper {
    width:500px;
    height:300px;
    overflow:hidden;
    border: 1px solid #000;
}
#ImageWrapper {
    text-align:center;
    width:500px;
    height:300px;
    overflow:hidden;
    
}
#ZoomImage {
    width:100%;
    
}

.viewport{
    height:100% !important;
    max-height:300px;
}

JavaScript

/*! jQuery imgViewer - v0.6.0 - 2013-06-06
 * https://github.com/waynegm/imgViewer
 * Copyright (c) 2013 Wayne Mogg; Licensed MIT */
;
(function ($) {
    $.widget("wgm.imgViewer", {
        options: {
            zoomStep: 0.1,
            zoom: 1,
            onClick: null,
            onUpdate: null
        },

        _create: function () {
            var self = this;
            if (!this.element.is("img")) {
                $.error('imgviewer plugin can only be applied to img elements');
            }
            //		the original img element
            self.img = self.element[0];
            var $img = $(self.img);
            /*
             *		a copy of the original image to be positioned over it and manipulated to
             *		provide zoom and pan
             */
            self.zimg = $("<img/>", {
                "src": self.img.src
            }).appendTo("body").wrap("<div class='viewport'/>");
            var $zimg = $(self.zimg);
            //		the container or viewport for the image view
            self.view = $(self.zimg).parent();
            var $view = $(self.view);
            //		the pixel coordinate of the original image at the center of the viewport
            self.vCenter = {};
            //		a flag used to decide if a mouse click is part of a drag or a proper click
            self.dragging = false;
            //		a flag used to check the target image has loaded
            self.ready = false;
            $img.one("load", function () {
                //			get and some geometry information about the image
                self.ready = true;
                var width = $img.width(),
                    height = $img.height(),
                    offset = $img.offset();
                //			cache the image padding information
                self.offsetPadding = {
                    top: parseInt($img.css('padding-top'), 10),
                    left: parseInt($img.css('padding-left'), 10),
                    right:...