Asp.net Image Magnifying Effect With jQuery

-

Image Magnifying Glass Effect With jQuery in asp.net: 



Magnification is a technique of enlarging something only in Image appearance, not in Image physical size. This enlargement is fixed size (number) also called "magnification". When this number is less than 1, then it refers to a reduction (form natural size) in size, sometimes this process called "magnification" or "de-magnification".

Asp.net using jquery to zoom dynamic images:

Some time the web developer/designer have some question as like that “Basically they wanted to create a magnifying glass effect on my image while they move mouse and hold left-mouse-button. But it acts like in dragging the picture.”

Image Zoom using jQuery Magnifier with css:

In this given code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. And Jquery is used to position it at the cursor coordinates and change the background position of image accordingly. Moving the Mouse cursor away from the image gently fades out the magnifying glass bringing the image back to the previews size.

asp.net Image Magnifying Effect With jQuery
Magnifying Effect With jQuery

Code of Image Magnify .css file:

.magnify {
    position: relative;
    cursor: none
}

.magnify-large {
    position: absolute;
    display: none;
    width: 175px;
    height: 175px;

    -webkit-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);
       -moz-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);
            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);
   
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
             border-radius: 100%
}


JQuery code for fancy Zoom effect for Image in asp.net

Code of magnify.js:

!function ($) { 
    "use strict";

    var Magnify = function (element, options) {
        this.init('magnify', element, options)
    } 
    Magnify.prototype = { 
        constructor: Magnify 
        , init: function (type, element, options) {
            var event = 'mousemove'
                , eventOut = 'mouseleave';

            this.type = type
            this.$element = $(element)
            this.options = this.getOptions(options)
            this.nativeWidth = 0
            this.nativeHeight = 0

            if(!this.$element.parent().hasClass('magnify')) {
                this.$element.wrap('<div class="magnify" \>');
                this.$element.parent('.magnify').append('<div class="magnify-large" \>');
            }           
            this.$element.siblings(".magnify-large").css("background","url('" + this.$element.attr("src") + "') no-repeat");

            this.$element.parent('.magnify').on(event + '.' + this.type, $.proxy(this.check, this));
            this.$element.parent('.magnify').on(eventOut + '.' + this.type, $.proxy(this.check, this));
        } 
        , getOptions: function (options) {
            options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
             if (options.delay && typeof options.delay == 'number') {
                options.delay = {
                    show: options.delay
                    , hide: options.delay
                }
            } 
            return options
        }
         , check: function (e) {
            var container = $(e.currentTarget);
            var self = container.children('img');
            var mag = container.children(".magnify-large");

            // Get the native dimensions of the image
            if(!this.nativeWidth && !this.nativeHeight) {
                var image = new Image();
                image.src = self.attr("src");

                this.nativeWidth = image.width;
                this.nativeHeight = image.height;

            } else {

                var magnifyOffset = container.offset();
                var mx = e.pageX - magnifyOffset.left;
                var my = e.pageY - magnifyOffset.top;

                if (mx < container.width() && my < container.height() && mx > 0 && my > 0) {
                    mag.fadeIn(100);
                } else {
                    mag.fadeOut(100);
                } 
                if(mag.is(":visible"))
                {
                    var rx = Math.round(mx/container.width()*this.nativeWidth - mag.width()/2)*-1;
                    var ry = Math.round(my/container.height()*this.nativeHeight - mag.height()/2)*-1;
                    var bgp = rx + "px " + ry + "px";

                    var px = mx - mag.width()/2;
                    var py = my - mag.height()/2;

                    mag.css({left: px, top: py, backgroundPosition: bgp});
                }
            }

        }
    } 
    $.fn.magnify = function ( option ) {
        return this.each(function () {
            var $this = $(this)
                , data = $this.data('magnify')
                , options = typeof option == 'object' && option
            if (!data) $this.data('tooltip', (data = new Magnify(this, options)))
            if (typeof option == 'string') data[option]()
        })
    } 
    $.fn.magnify.Constructor = Magnify

    $.fn.magnify.defaults = {
        delay: 0
    }   
  
    $(window).on('load', function () {
        $('[data-toggle="magnify"]').each(function () {
            var $mag = $(this);
            $mag.magnify()
        })
    })

} ( window.jQuery );

 We give Example of Magnifying Effect With jQuery in next post : see Example.;

JQuery Related Other  Post with Example:




Comments

  1. AnonymousJune 12, 2019 at 7:08 AM

    I cannot seem to get this working, any help?

    ReplyDelete

Post a Comment