Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Tuesday, September 16, 2014

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 

Asp.net Related Other Post in this Tutorial:



1 comment: