image resize by adding values to retried width and height of image

Question

i have an series of images whose width and height varies. in my application i need to gradually grow image when it gets focus.after image loads i have used

var w='img.width' var h='img.height'

to get width and height of image. now how do i add some value say 10px to both width and height so that i can pass this values to grow function.

<script type='text/javascript'> 

   $(window).load(function(){
  var timer = null;

$(function() {
    $('button:has(img)').focus(function() {
        var $image = $(this).find('img');
        timer = setTimeout(function() {
        var w = 'img.width';
        var h = 'img.height';
        var zoominw= w+10;
        var zoominh=h+10;
            $image.animate({
                'width': 'zoominw',
                'height': 'zoominh'
            }, 500);
        }, 2000);
    }).blur(function() {
        if (timer != null)
            clearTimeout(timer);
        $(this).find('img').animate({
            'width': 'imgwidth',
            'height': 'imgheight'
        }, 500);
    });
});
  });

  </script>

Veger Veger · Accepted Answer · 2011-01-21T09:23:53

To get the width of an element use something like this:

var image = $(this).find('img');
var w = image.width();

(In your example, you are just setting the string img.width to the w variable instead of getting the value itself)

Next, just add 10 to the w variable and write back to img.width. Same goes for the h variable.

And finally, write back the updated value:

image.width(w);

Same goes for the height.

Assuming you want to animate the growth (and not just make it 10px bigger once), take a look at the jQuery animate documentation for more information on animating elements.

For example to animate the image to become 100px wider use something like this:

image.animate({"width": "+=100px"}, "slow");

(according to the animate documentation)

image resize by adding values to retried width and height of image

1 Answers