JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<a href="http://www.flickr.com/photos/markjsebastian/">Photo by mark sebastian</a> CC-BY
<p><a href="http://farm4.staticflickr.com/3137/2658170312_d58cfb7142_o.jpg" class="zoom"><img src="http://farm4.staticflickr.com/3137/2658170312_41cd5003cc_m.jpg" alt="New York"></a></p>

CSS

#easy_zoom{
    width:400px;
    height:600px;    
    border:5px solid #eee;
    background:#fff;
    color:#333;
    position:absolute;
    top:10px;
    left:200px;
    overflow:hidden;
    -moz-box-shadow:0 0 10px #777;
    -webkit-box-shadow:0 0 10px #777;
    box-shadow:0 0 10px #777;
    /* vertical and horizontal alignment used for preloader text */
    line-height:400px;
    text-align:center;
    }

JavaScript

(function($) {

    $.fn.easyZoom = function(options) {

        var defaults = {
            id: 'easy_zoom',
            parent: 'body',
            append: true,
            preload: 'Loading...',
            error: 'There has been a problem with loading the image.'
        };

        var obj;
        var img = new Image();
        var loaded = false;
        var found = true;
        var timeout;
        var w1, w2, h1, h2, rw, rh;
        var over = false;

        var options = $.extend(defaults, options);

        this.each(function() {

            obj = this;
            // works only for anchors
            var tagName = this.tagName.toLowerCase();
            if (tagName == 'a') {

                var href = $(this).attr('href');
                img.src = href + '?' + (new Date()).getTime() + ' =' + (new Date()).getTime();
                $(img).error(function() {
                    found = false;
                });
                img.onload = function() {
                    loaded = true;
                    img.onload = function() {};
                };

                $(this).css('cursor', 'crosshair').click(function(e) {
                    e.preventDefault();
                }).mouseover(function(e) {
                    start(e);
                }).mouseout(function() {
                    hide();
                }).mousemove(function(e) {
                    move(e);
                });
            };

        });

        function start(e) {
            hide();
            var zoom = $('<div id="' + options.id + '">' + options.preload + '</div>');
            if (options.append) {
                zoom.appendTo(options.parent);
            } else {
                zoom.prependTo(options.parent);
            };
            if (!found) {
                error();
            } else {
                if (loaded) {
                    show(e);
                } else {
                    loop(e);
                };
            };
        };

  ...