In this article i will show you how you can perform zoom effect in asp.net using jquery. This utility you can use it in your ecomanrce website for diaplaying image zoom.
So here we go first create a new asp.net application and add a new page. In this page add the below mention html code in the body part of the page.
Now in the header of the page add the below mention jquery librarary and css refrance.
Note: For getting the library file downnload the project.
After combining the code your page code will look like as shown below.
Now run the application and check the output.
Some of jQuery Article as follows.
Dynamic jQuery Image Gallery With Text Description In Asp.Net Using C# , Filter File Type/Extention in FileUpload Control in Asp.net Using C# , jQuery Mobile Collapsible Accordion Menu Example , How to Use IF ELSE IF Conditional Statement With And, OR, NOT Operator in Javascript , Disable Cut, Copy and Paste Functionality in Textbox Using jquery, javascript in Asp.Net .
Some of Asp.net Article as follows.
Asp.Net GridView Image Bind , GridView Delete With Confirmation Message In Asp.Net Using C# ,Fileupload Control In Asp.net , Binding GridView Using C# in Asp.Net .
So here we go first create a new asp.net application and add a new page. In this page add the below mention html code in the body part of the page.
<div class="clearfix" id="content" style="margin-top: 100px; margin-left: 350px;
height: 500px; width: 500px;">
<div class="clearfix">
<a href="images/big1.jpg" class="jqzoom" rel=`gal1` title="dotnetpools">
<asp:Image ID="img1" runat="server" title="dotnetpools" style="border: 4px solid #666;" />
</a>
</div>
<br />
<div class="clearfix">
<ul id="thumblist" class="clearfix">
<li><a class="zoomThumbActive" href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small1.jpg`,largeimage: `images/big1.jpg`}">
<asp:Image ID="img2" runat="server" /></a></li>
<li><a href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small2.jpg`,largeimage: `images/big2.jpg`}">
<asp:Image ID="img3" runat="server" /></a></li>
<li><a href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small3.jpg`,largeimage: `images/big3.jpg`}">
<asp:Image ID="img4" runat="server" /></a></li>
</ul>
</div>
</div>
height: 500px; width: 500px;">
<div class="clearfix">
<a href="images/big1.jpg" class="jqzoom" rel=`gal1` title="dotnetpools">
<asp:Image ID="img1" runat="server" title="dotnetpools" style="border: 4px solid #666;" />
</a>
</div>
<br />
<div class="clearfix">
<ul id="thumblist" class="clearfix">
<li><a class="zoomThumbActive" href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small1.jpg`,largeimage: `images/big1.jpg`}">
<asp:Image ID="img2" runat="server" /></a></li>
<li><a href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small2.jpg`,largeimage: `images/big2.jpg`}">
<asp:Image ID="img3" runat="server" /></a></li>
<li><a href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small3.jpg`,largeimage: `images/big3.jpg`}">
<asp:Image ID="img4" runat="server" /></a></li>
</ul>
</div>
</div>
Now in the header of the page add the below mention jquery librarary and css refrance.
<script src="Scripts/jquery-1.6.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="Styles/Site.css" type="text/css" />
<link href="Styles/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
Now add the below mention jquery code in header part of the page.<script src="Scripts/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="Styles/Site.css" type="text/css" />
<link href="Styles/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$(`.jqzoom`).jqzoom({
zoomType: `standard`,
lens: true,
preloadImages: false,
alwaysOn: false
});
});</script>
$(document).ready(function () {
$(`.jqzoom`).jqzoom({
zoomType: `standard`,
lens: true,
preloadImages: false,
alwaysOn: false
});
});</script>
Note: For getting the library file downnload the project.
After combining the code your page code will look like as shown below.
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true"CodeBehind="Default.aspx.cs"
Inherits="WebApplication1._Default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zoom Effect Using Jquery In Asp.Net</title>
<script src="Scripts/jquery-1.6.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="Styles/Site.css" type="text/css" />
<link href="Styles/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$(`.jqzoom`).jqzoom({
zoomType: `standard`,
lens: true,
preloadImages: false,
alwaysOn: false
});
});</script>
</head>
<body>
<div class="clearfix" id="content" style="margin-top: 100px; margin-left: 350px;
height: 500px; width: 500px;">
<div class="clearfix">
<a href="images/big1.jpg" class="jqzoom" rel=`gal1` title="dotnetpools">
<asp:Image ID="img1" runat="server" title="dotnetpools" style="border: 4px solid #666;" />
</a>
</div>
<br />
<div class="clearfix">
<ul id="thumblist" class="clearfix">
<li><a class="zoomThumbActive" href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small1.jpg`,largeimage: `images/big1.jpg`}">
<asp:Image ID="img2" runat="server" /></a></li>
<li><a href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small2.jpg`,largeimage: `images/big2.jpg`}">
<asp:Image ID="img3" runat="server" /></a></li>
<li><a href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small3.jpg`,largeimage: `images/big3.jpg`}">
<asp:Image ID="img4" runat="server" /></a></li>
</ul>
</div>
</div>
</body>
</html>
Inherits="WebApplication1._Default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zoom Effect Using Jquery In Asp.Net</title>
<script src="Scripts/jquery-1.6.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="Styles/Site.css" type="text/css" />
<link href="Styles/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$(`.jqzoom`).jqzoom({
zoomType: `standard`,
lens: true,
preloadImages: false,
alwaysOn: false
});
});</script>
</head>
<body>
<div class="clearfix" id="content" style="margin-top: 100px; margin-left: 350px;
height: 500px; width: 500px;">
<div class="clearfix">
<a href="images/big1.jpg" class="jqzoom" rel=`gal1` title="dotnetpools">
<asp:Image ID="img1" runat="server" title="dotnetpools" style="border: 4px solid #666;" />
</a>
</div>
<br />
<div class="clearfix">
<ul id="thumblist" class="clearfix">
<li><a class="zoomThumbActive" href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small1.jpg`,largeimage: `images/big1.jpg`}">
<asp:Image ID="img2" runat="server" /></a></li>
<li><a href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small2.jpg`,largeimage: `images/big2.jpg`}">
<asp:Image ID="img3" runat="server" /></a></li>
<li><a href=`javascript:void(0);` rel="{gallery: `gal1`, smallimage: `images/small3.jpg`,largeimage: `images/big3.jpg`}">
<asp:Image ID="img4" runat="server" /></a></li>
</ul>
</div>
</div>
</body>
</html>
Now run the application and check the output.
No comments:
Post a Comment