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.
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()
})
})
JQuery Related Other Post with Example:
- Asp.net CheckBoxList using jQuery.
- Cropping image using jQuery in asp.net
- Ajax ColorPickerExtender in ASP.NET Example
- jquery tooltip with css in asp.net web page
- Drag and Drop Sortable Lists using jQueryUI
- jQuery modal dialog with postbacks
- Get current datetime in jquery and javaScript.
- jQuery modal dialog with postback in asp.net
- Get selected radio button values using JQuery.
- How do you do html text encodes using JavaScript
- Validate ASP.Net RadioButtonList using JavaScript Example
- Example of jQuery Validate on Radiobuttonlist in Asp.Net using C#
- jquery disable or Enable submit button after validation
- Displaying the textbox value in javascript Messagebox
- Check Uncheck all asp.net CheckBox in asp.net using jQuery
- Example of jQuery Validate on Radiobuttonlist in Asp.Net using C#
- Limitation of Characters in Textbox or TextArea in asp.netusing jquery:
- JQuery UI Datepicker (Calendar) with asp.net textbox
- What is the Ajax colorpicker,How to use Ajax colorpicker
I cannot seem to get this working, any help?
ReplyDelete