how do i resize an image using jquery?

<td align="center"><img width="150px" src="{{=URL(r=request, f='download', args=Product.image)}}" AlT="no picture provided"/></td>

the images are loaded directly from the database using a forloop and are displayed on the screen.

all i want to achieve is the increase the size of an image when you click on it. something like this .asp?filename=tryjquery_animation1_relative but it shouldn't keep on increasing the image.

how do i resize an image using jquery?

<td align="center"><img width="150px" src="{{=URL(r=request, f='download', args=Product.image)}}" AlT="no picture provided"/></td>

the images are loaded directly from the database using a forloop and are displayed on the screen.

all i want to achieve is the increase the size of an image when you click on it. something like this http://www.w3schools./jquery/tryit.asp?filename=tryjquery_animation1_relative but it shouldn't keep on increasing the image.

• javascript
• jquery

2 Answers 2

Here's my fiddle. It is simple. The trick to not increase many times is this condition:

if (img.width() < 200)

Fiddle's code:

<!-- Html -->

<img id="mrbean" src="http://2.bp.blogspot./-C6KY8tsc8Fw/T-SVFnncxjI/AAAAAAAAANw/FMiNzA8Zecw/s640/mr.bean.jpg" width="50" height="50" />

<input type="button" value="Increase image size" />

// JavaScript
$("input").click(function() {
    var img = $("#mrbean");

    if (img.width() < 200)
    {
        img.animate({width: "200px", height: "200px"}, 1000);
    }
    else 
    {
        img.animate({width: img.attr("width"), height: img.attr("height")}, 1000);
    }
});

Updated fiddle to resize image back to it's original size on second click.

Very simple JSFiddle for you: Fiddle.

Simply set a click event on the image using jQuery, then modify the height and width directly.

$('.myImg').click(function() {
    $(this).height(400);
    $(this).width(400);
    $(this).off(); //removes the handler so that it only resizes once...
})