Social Networks

After very good feedback on the Increase Decrease Font Size Using JQuery this tutorial focus on how to zoom in and zoom out image using jQuery. Script will increase size of image from 100 to 300 px, you can change script as per your requirement.

zoom-image

When image clicked we used toggle method in two function to zoom in and zoom out image. For live demo click on below demo to see in action –

Demo

JQuery:

<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", "100px");
$("#image").toggle(function()
{
$(this).animate({width: "300px"}, 1000);
$('p').text("Click To Zoom Out");

}, function(){
$(this).animate({width: "100px"}, 1000);
$('p').text("Click To Zoom In");
});
});
</script>

HTML:

<img src="http://onlinewebapplication.com/wp-content/uploads/2011/11/watermark-tech-blog.jpg?x36498" alt="Logo" id="image">
<p>
Click on above picture To Zoom In
</p>

 

None found.
  1. Navtej Singh says:

    Real nice tutorial, Mr Jha. Somehow it is not working for me the way it should be.
    I am sure it must be due to some sort of Syntax or setting omission on my part.
    Otherwise, a very simple and to the point tutorial which everybody should be able to activate on his/her site.

  2. i have 2 images 1 is background image of another. i want to get the background image zoom with out the front image. how can i do. do you help me

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>