gistfile1.txt

$.magnifier = function (target, options) {
    if (!target || !$(target).length) return false;
    options = options || {};

    var nativeWidth = 0;
    var nativeHeight = 0;
    var mouse = {x: 0, y: 0};
    var $curImg;

    var ui = {
        magnifier: $(target),
        glass: {},
    };

    var __defaultStyles = {
        'position': 'absolute',
        'z-index': '1100',
        'display': 'none',
        'width': '175px',
        'height': '175px',
        'border-radius': '50%',
        'background-color': '#fff',
        'cursor': 'none',
        // glass effect
        'box-shadow': '0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25)',
    };

    var styles = $.extend({}, __defaultStyles, options.style);
    // Insert magnifier DOM element on document
    ui.glass = $('<div class="glass"></div>').css(styles);
    $('body').append(ui.glass);

    // If cursor on image outside, hide it.
    var magnifyMove = function (e) {
        var magnifyOffset = $curImg.offset();

        mouse.x = e.pageX - magnifyOffset.left;
        mouse.y = e.pageY - magnifyOffset.top;

        if (mouse.x < $curImg.width() && mouse.y < $curImg.height() && mouse.x > 0 && mouse.y > 0) {
            var uiGlassHalfWidth = ui.glass.width() / 2;
            var uiGlassHalfHeight = ui.glass.width() / 2;

            var rx = Math.round(mouse.x / $curImg.width() * nativeWidth - uiGlassHalfWidth) * -1;
            var ry = Math.round(mouse.y / $curImg.height() * nativeHeight - uiGlassHalfHeight) * -1;

            ui.glass.css({
                left: e.pageX - uiGlassHalfWidth,
                top: e.pageY - uiGlassHalfHeight,
                backgroundPosition: rx + "px " + ry + "px"
            });

            return;
        } else {
            ui.glass.off('mousemove');
            ui.glass.fadeOut(100);
        }

        return null;
    };

    ui.magnifier.on('mousemove', function () {
        ui.glass.fadeIn(100);

        $curImg = $(this);
        var src = $curImg.attr('src');

        var $parentLink = $curImg.parent('a');
        if (1 === $parentLink.length) {
            var href = $parentLink.attr('href');
            if (href.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)) {
                src = href;
            }
        }

        if (src) {
            ui.glass.css({
                'background-image': 'url(' + src + ')',
                'background-repeat': 'no-repeat'
            });
        }

        if (!$curImg.data('nativeWidth')) {
            var imageObject = new Image();

            imageObject.onload = function () {
                nativeWidth = imageObject.width;
                nativeHeight = imageObject.height;

                $curImg.data('nativeWidth', nativeWidth);
                $curImg.data('nativeHeight', nativeHeight);

                magnifyMove.apply(this, arguments);
                ui.glass.on('mousemove', magnifyMove);
            };

            imageObject.src = src;

            return;
        } else {
            nativeWidth = $curImg.data('nativeWidth');
            nativeHeight = $curImg.data('nativeHeight');
        }

        magnifyMove.apply(this, arguments);
        ui.glass.on('mousemove', magnifyMove);
    });

    // For gallery compatibility (for ex. Fancybox, Photoswipe..)
    ui.glass.on('click', function () {
        $curImg.trigger('click');
    });
};

// How to use
$.magnifier('article img');