JSFiddle - React, Tailwind, and code Playground

by quirksmode

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
<div id="asset-wrap" class="asset-wrap"></div>
<div id="zoom-in" class="zoom-in">Zoom In</div>
<div id="zoom-out" class="zoom-out">Zoom Out</div>

CSS

html, body {
  height: 100%;
}

 .asset-wrap {
  height: 100%;
  width: 100%;
 }

.asset-holder {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.asset-img {
  transform-style: preserve-3d;
  height: auto;
  max-width: 100%;
}

.zoom-in,
.zoom-out {
  position: absolute;
  bottom: 20px;
  background: #000;
  padding: 30px;
  color: #fff;
  cursor: pointer;
}

.zoom-out {
  left: 20px;
}

.zoom-in {
  right: 20px;
}

JavaScript

jQuery.fn.mousehold = function (timeout, f) {
    if (timeout && typeof timeout == 'function') {
        f = timeout;
        timeout = 100;
    }
    if (f && typeof f == 'function') {
        var timer = 0;
        var fireStep = 0;
        return this.each(function () {
            jQuery(this).mousedown(function () {
                fireStep = 1;
                var ctr = 0;
                var t = this;
                timer = setInterval(function () {
                    ctr++;
                    f.call(t, ctr);
                    fireStep = 2;
                }, timeout);
            })

            clearMousehold = function () {
                clearInterval(timer);
                if (fireStep == 1) f.call(this, 1);
                fireStep = 0;
            }

            jQuery(this).mouseout(clearMousehold);
            jQuery(this).mouseup(clearMousehold);
        })
    }
}

/**
 * CSS3 Transform helper
 */
var cssTransformScale = function (x, y, z) {
    return {
        '-webkit-transform': 'scale3d(' + x + ', ' + y + ', ' + z + ')',
            '-moz-transform': 'scale3d(' + x + ', ' + y + ', ' + z + ')',
            '-ms-transform': 'scale3d(' + x + ', ' + y + ', ' + z + ')',
            '-o-transform': 'scale3d(' + x + ', ' + y + ', ' + z + ')',
            'transform': 'scale3d(' + x + ', ' + y + ', ' + z + ')',
    };
};




$(document).ready(function () {

    var assetViewer = {
        name: 'assetViewer',
        defaults: {
            $assetWrap: $('#asset-wrap'),
            $assetImg: $('.asset-img'),
            imgSrc: "http://lorempixel.com/1600/760/",
            zoomScale: 0.01,
            initialZoom: 1,
            currentZoom: 1,
            maxZoom: 3,
            minZoom: 1,
            $zoomIn: $('#zoom-in'),
            $zoomOut: $('#zoom-out')
        },
        init: function (options) {
            var me = this;
            this.options = $.extend(this.defaults, options);

            this.appendImage();
           ...