Image Zoom or Enlarge on Mouseover Using JQuery in Asp.Net

Image Zoom on Mouseover

Image Display Small Size  MouseOver The Image Show Zooming the Particular Image Using JQuery Plugin in Asp.Net.

                               Download Coding





<html xmlns="">
<head id="Head1">
<title>  </title>
<script type="text/javascript" src="JQuery/jquery-1.4.1.js"></script>
<script type="text/javascript" src="JQuery/Drizzles.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {


            zoomrange: [7, 7],
            magnifiersize: [550, 550],
            magnifierpos: 'right',
            cursorshade: true,
            cursorshadecolor: 'Green',
            cursorshadeopacity: 0.3,
            cursorshadeborder: '1px solid red',
            largeimage: '2.png'
            zoomrange: [3, 10],
            magnifiersize: [300, 300],
            magnifierpos: 'right',
            cursorshade: true,
            largeimage: '1.png'
<style type="text/css">
            box-shadow: 5px 5px 7px #818181;
            -webkit-box-shadow: 5px 5px 7px #818181;
            -moz-box-shadow: 5px 5px 7px #818181;
            filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
            background: white;
    <form id="form1" runat="server">
   <div align="center">
               <asp:Image ID="image1" runat="server" ImageUrl="~/1.png" Width="100px"></asp:Image>
               <asp:Image ID="image2" runat="server" ImageUrl="~/2.png" Width="100px" />
           <tr><td colspan="2">
           <asp:Image ID="image3" runat="server" ImageUrl="~/3.png" Width="100px" />



First - Create New Web Form -  Add Image Control From ToolBox  - Image Property[F4] - ImageUrl - Assign Image for All Image Control

Next - Add JQuery Condition For  All Image Control - Position,ZoomSize etc..


Post a Comment