JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<img id='foo' src='http://placekitten.com/2000/1000' width='500' height='250'>

JavaScript

// Wheelzoom 1.1
// (c) 2012 jacklmoore.com | license: www.opensource.org/licenses/mit-license.php
!function($){
    var transparentPNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";
    var defaults = {
        zoom: 0.10
    };
    var wheel;

    if ( document.onmousewheel !== undefined ) { // Webkit/Opera/IE
        wheel = 'onmousewheel';
    }
    else if ( document.onwheel !== undefined) { // FireFox 17+
        wheel = 'onwheel';
    }

    $.fn.wheelzoom = function(options){
        var settings = $.extend({}, defaults, options);

        if (!this[0] || !wheel || !('backgroundSize' in this[0].style)) { // IE8-
            return this;
        }

        return this.each(function(){
            var img = this;
            var $img = $(img);

            function loaded() {
                var width = $img.width();
                var height = $img.height();
                var bgWidth = width;
                var bgHeight = height;
                var bgPosX = 0;
                var bgPosY = 0;
                var offsetBorderX = parseInt($img.css('border-left-width'),10);
                var offsetBorderY = parseInt($img.css('border-top-width'),10);
                var offsetPaddingX = parseInt($img.css('padding-left'),10);
                var offsetPaddingY = parseInt($img.css('padding-top'),10);

                $img.css({
                    background: "url("+img.src+") 0 0 no-repeat",
                    backgroundSize: width+'px '+height+'px',
                    backgroundPosition: offsetPaddingX+'px '+offsetPaddingY+'px'
                });

                function updateBgStyle() {
                    if (bgPosX > 0) {
                        bgPosX = 0;
                    } else if (bgPosX < width - bgWidth) {
                        bgPosX = width - bgWidth;
                    }

                    if (bgPosY > 0) {
                        bgPosY = 0;
               ...