image zoom out feature using javascript

Question

I am working on a project in which there is an image when user clicks on image the image zoom in and when click again the image zoom out. How can I make a zoom out feature in my code here

function resizeImg (img) {
    var scale = 150/100;
    var pos = $(img).offset();
    var clickX = event.pageX - pos.left;
    var clickY = event.pageY - pos.top;
    var container = $(img).parent().get(0);

    $(img).css({
        width: img.width*scale, 
        height: img.height*scale
    });

    container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
    container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}

Answer 1

You dont need a lot of javascript here..just some good CSS as shown here: http://jsfiddle.net/95wqh/10/

JS:

$('.image').on('click', function () {
    $(this).toggleClass('zoom');
});

css:

#Container {
    position:relative;
    overflow:auto;
}

.zoom{
    -webkit-transform : scale(1.5);
    transform: scale(1.5);
}

Answer 2

Try and see if the below code helps you. Demo

EDIT: Just in-case you want to do this on multiple images in same page.

var zoom = "in";

$('.image').on('click', function () {
    this.zoom = (this.zoom == "in") ? "out" : "in";
    console.log(this.zoom);
    resizeImg(this);
});

function resizeImg (img) {
    var scale = 150/100;
    var pos = $(img).offset();
    var clickX = event.pageX - pos.left;
    var clickY = event.pageY - pos.top;
    var container = $(img).parent().get(0);

    if(img.zoom == "in"){
         $(img).css({
            width: img.width*scale, 
            height: img.height*scale
         });
    }
    else if (img.zoom == "out"){
        $(img).css({
            width: img.width/scale, 
            height: img.height/scale
        });
    }  
    container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
    container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}