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

23:51:00  , , , , , ,  No comments

Image Zoom on Mouseover

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

                                Download Coding

                                                    Download
                                                 JQueryPlugin

                                       DEMO
                                     


HTML CODING

<html xmlns="http://www.w3.org/1999/xhtml">
<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 ($) {

        $('#image3').addimagezoom()

        $('#image2').addimagezoom({
            zoomrange: [7, 7],
            magnifiersize: [550, 550],
            magnifierpos: 'right',
            cursorshade: true,
            cursorshadecolor: 'Green',
            cursorshadeopacity: 0.3,
            cursorshadeborder: '1px solid red',
            largeimage: '2.png'
        })
        $('#image1').addimagezoom({
            zoomrange: [3, 10],
            magnifiersize: [300, 300],
            magnifierpos: 'right',
            cursorshade: true,
            largeimage: '1.png'
        })
      
    })
</script>
<style type="text/css">
        .magnifyarea
        {
            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;
        }
</style>
    </head>
<body>
    <form id="form1" runat="server">
   <div align="center">
       <table>
           <tr><td>
               <asp:Image ID="image1" runat="server" ImageUrl="~/1.png" Width="100px"></asp:Image>
       
             </td><td>
               <asp:Image ID="image2" runat="server" ImageUrl="~/2.png" Width="100px" />
               </td></tr>
           <tr><td colspan="2">
                   
           <asp:Image ID="image3" runat="server" ImageUrl="~/3.png" Width="100px" />
                                            
                        </td></tr>

       </table>     

   </div>                       
    </form> 
  
    </body>
</html>
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..





0 comments:

Post a Comment