Zoom In Zoom Out Image using jQuery
To day we are going to discuss about Zoom In Zoom Out of an Image. We may oftenly encounter a situation to develop the web page which have feature Zoom In Zoom Out for the Images. We can do this very easily by using the JQuery.
Below is the sample program to develop a Zoom In Zoom Out feature for a Image.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ZoomInOut.aspx.cs" Inherits="WebApplication10.ZoomInOut" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<img alt="My Image" id="image" src="Styles/cern_141211_60.jpg">
<p>
Click on above picture To Zoom In and Zoom Out
</p>
</div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function ()
{
$("#image").css("width", "200px");
$("#image").toggle(function ()
{
$(this).animate({ width: "400px" }, 1000);
$('p').text("Click To Zoom Out");
},
function ()
{
$(this).animate({ width: "200px" }, 1000);
$('p').text("Click To Zoom In");
});
});
</script>
</body>
</html>
Thanks to share this....