Image magniflier

magniflier.js

$.magniflier = function( target, style ) {
    if( !target )  return false;
    var style = style || false;

    var native_width = 0;
    var native_height = 0;
    var mouse = {x: 0, y: 0};
    var $curImg;

    var ui = {
        magniflier: $(target),
        glass: $('.glass'),
    };

    var css = {
        'width': '175px',
        'height': '175px',
        'position': 'absolute',
        'z-index': '1100',
        'border-radius': '50%',
        'cursor': 'none',
        'background-color': '#fff',
        // 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)',
        'display': 'none',
    }

    if( style ) {
        $.each(style, function(index, val) {
            css[ index ] = val;
        });
    }

    // Insert magniflier DOM element on document (If not exists)
    if (ui.magniflier.length && !ui.glass.length) {
        ui.glass = $("<div></div>")
            .addClass('glass')
            .css(css);

        $('body').append(ui.glass);
    }

    var magnify = function(e) {
        var uiGlassHalfWidth = ui.glass.width()/2;
        var uiGlassHalfHeight = ui.glass.width()/2;

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

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

        return;
    };

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

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

        if ( mouse.x < $curImg.width() && mouse.y < $curImg.height() && mouse.x > 0 && mouse.y > 0 ) {
            magnify(e);
        }
        else {
            ui.glass.fadeOut(100);
        }

        return;
    };

    ui.magniflier.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');
            var re = /(\.jpg|\.png|\.webp|\.gif|\.svg)/i;
            var found = href.match(re);

            src = href;
        }

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

        if ( !$curImg.data('native_width') ) {
            var image_object = new Image();

            image_object.onload = function() {
                native_width = image_object.width;
                native_height = image_object.height;

                $curImg.data('native_width', native_width);
                $curImg.data('native_height', native_height);

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

            image_object.src = src;

            return;
        } else {
            native_width = $curImg.data('native_width');
            native_height = $curImg.data('native_height');
        }

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

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

// How to use
$.magniflier('img');