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">
<form id="form1" runat="server">
<img alt="My Image" id="image" src="Styles/cern_141211_60.jpg">
Click on above picture To Zoom In and Zoom Out
<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");


Author: Avinash Singh30 Aug 2012 Member Level: Silver   Points : 0

Thanks to share this....

Author: G. S.07 Sep 2012 Member Level: Gold   Points : 0

Hey, Naveen thanks for sharing this. It helps a lot...

Author: sandeep07 Sep 2012 Member Level: Bronze   Points : 0

Hey, Thanks for sharing

Guest Author: Sare25 Sep 2013

How to Crop and save image in c# server side code after zooming image with Jquery

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: