I'm trying to make a zoom in zoom out buttons that will zoom in and zoom out on a picture that is inside a div. The problem is when press the zoom in or zoom out the picture goes out from the div. I think I'm not doing it right.

image.height = image.height+50
image.width= image.height+50

I would be grateful if anyone could give me any tips or code examples.

I'm trying to make a zoom in zoom out buttons that will zoom in and zoom out on a picture that is inside a div. The problem is when press the zoom in or zoom out the picture goes out from the div. I think I'm not doing it right.

image.height = image.height+50
image.width= image.height+50

I would be grateful if anyone could give me any tips or code examples.

• javascript
• jquery
• html
• css
• jquery-plugins

1 Answer 1

Here is a simple setup...

Check out this FIDDLE

var imagesize = $('img').width();

$('.zoomout').on('click', function(){
    imagesize = imagesize - 5;
    $('img').width(imagesize);
});

$('.zoomin').on('click', function(){
    imagesize = imagesize + 5;
    $('img').width(imagesize);
});