jQuery Zoom Image on Mouseover in asp.net using jQuery
jQuery Zoom Image on Mouseover in Asp.net using jQuery Image:
In this post we consider an Example in which we use Jquery
Magnifier for Image Zooming.
In many time we see this type of function in web site,
basically online shopping and two wheeler and four wheeler’s companies use this
in our web site.
Magnifying Glass Effect on Asp.net web page Images:
For view the code of Magnifier.js click here:
Code of Magnifier.min.js:
!function(e){"use strict";var
t=function(e,t){this.init("magnify",e,t)};t.prototype={constructor:t,init:function(t,n,r){var
i="mousemove",s="mouseleave";this.type=t;this.$element=e(n);this.options=this.getOptions(r);this.nativeWidth=0;this.nativeHeight=0;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(i+"."+this.type,e.proxy(this.check,this));this.$element.parent(".magnify").on(s+"."+this.type,e.proxy(this.check,this))},getOptions:function(t){t=e.extend({},e.fn[this.type].defaults,t,this.$element.data());t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay});return t},check:function(t){var n=e(t.currentTarget),r=n.children("img"),i=n.children(".magnify-large");if(!this.nativeWidth&&!this.nativeHeight){var
s=new Image;s.src=r.attr("src");this.nativeWidth=s.width;this.nativeHeight=s.height}else{var
o=n.offset(),u=t.pageX-o.left,a=t.pageY-o.top;u<n.width()&&a<n.height()&&u>0&&a>0?i.fadeIn(100):i.fadeOut(100);if(i.is(":visible")){var f=Math.round(u/n.width()*this.nativeWidth-i.width()/2)*-1,l=Math.round(a/n.height()*this.nativeHeight-i.height()/2)*-1,c=f+"px "+l+"px",h=u-i.width()/2,p=a-i.height()/2;i.css({left:h,top:p,backgroundPosition:c})}}}};e.fn.magnify=function(n){return this.each(function(){var r=e(this),i=r.data("magnify"),s=typeof
n=="object"&&n;i||r.data("tooltip",i=new
t(this,s));typeof
n=="string"&&i[n]()})};e.fn.magnify.Constructor=t;e.fn.magnify.defaults={delay:0};e(window).on("load",function(){e('[data-toggle="magnify"]').each(function(){var t=e(this);t.magnify()})})}(window.jQuery);
Jquery related Other Post:
- Asp.net CheckBoxList using jQuery.
- Cropping image using jQuery in asp.net
- Displaying the textbox
value in javascript Messagebox
- Get selected radio button values using JQuery.
- How
do you do html text encodes using JavaScript
- Limit Number of Characters in a TextArea using
jQuery
- Limitation of Characters in Textbox or TextArea in
asp.netusing jquery:
- jquery disable or Enable submit button after
validation
- Enable
Disable Submit Button using jQuery
- JQuery
UI Datepicker (Calendar) with asp.net textbox
- Get current datetime in jquery and javaScript.
- jQuery modal dialog with postback in asp.net
Powerful Image Zoom Effect Using .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%
}
Second .css files code for Magnify image:
.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%
}
Add magnifying glass images using jQuery:
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="jQuery_Magnifier.aspx.cs"
Inherits="jQuery_Magnifier"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/bootstrap-magnify.min.js"></script>
<link rel="stylesheet"
href="css/bootstrap-magnify.css">
<style type="text/css">
.container
{
width:200px;
margin: -100px 0 0 -100px;
position:absolute;
top: 50%;
left: 50%;
}
.container img
{
max-width:
100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<div>
<h1 style="width: 874px; color: #990000; text-decoration:
underline;"> Magnifying
and image zoom using Jquery </h1>
<h1 style="width: 874px; color: #990000; text-decoration:
underline;"> and CSS3 Example </h1>
</div>
<div class="container">
<img data-toggle="magnify"
src="example/iphone.jpg"
alt="">
</div>
</div>
</form>
</body>
</html>
jQuery Zoom Image |
Asp.net Related Other Post in this Tutorial:
- how to add captcha in Asp.net programming
- Example of DropDownList inside GridView
- Introduction of Asp.net grid view Control.
- Example of Templatefield in asp.net gridview.
- Show gridview Row Details And Give Example.
- Ckeck box list example using javascript in grid.
- Example of DropDownList inside GridView control
- Example of Crystal report(Crystal_report_in asp.net programming )
- How to Make a HTML Table by C# code in asp.net programming
- Example of C# for Bind Data to asp.net Textbox inside gridview control
- Dynamically creating aspx page,
- JQuery UI Datepicker (Calendar) with asp.net textbox
- What is the Ajax colorpicker,How to use Ajax colorpicker
- 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 the current page url by C#
Thanks.
ReplyDeletehttp://www.designsmatrix.in