Question

So I have an onclick event and then another event on the same click. Basic function works like this:

1) Click image – Zoom 700%
2) Click image again – Zoom 100%
3) Click image again – Zoom 100%

I want step 3 to revert back to step 1 and then to 2 etc. Right now, it just repeats step 2 forever instead of reverting back to default.

Here is the code:

$(document).ready(function() {
    $(".zoomTarget").debug();
    $(window).resize(function(evt) {
        $(".zoomTarget").debug();
    });
    $(".zoomTarget").click(function(evt) {
        evt.stopPropagation();
        $(this).zoomTo({
            targetsize: 5.0
        }); {
            $(".zoomTarget").click(function(evt) {
                evt.stopPropagation();
                $("body").zoomTo({
                    targetsize: 1.0
                });
            });
        }
    });
    $(document).click(function(evt) {
        evt.stopPropagation();
        $("body").zoomTo({
            targetsize: 1.0
        });
    });
    $("body").zoomTo({
        targetsize: 1.0
    });
};

Answer 1

Personally I would use a boolean inside the ready function to keep track of what state I’m in, and then toggle it inside the handler:

var zooming_in=true;
$(".zoomTarget").click(function(evt) {
     evt.stopPropagation();
     $(this).zoomTo({
          targetsize: (zooming_in=!zooming_in)?5.0:1.0
     });
});