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:

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 on Mouseover in asp.net using jQuery
jQuery Zoom Image 
Download Full code Here:..

Asp.net Related Other Post in this Tutorial:



Comments

Post a Comment