activate/deactivate javascript on button click

Question

I am using a javascript to zoom an image on my asp.net web page. I want to put 2 buttons on it like "Zoom" "Cancel Zoom" and accordingly activate/deactivate the javascript functionality. Right now I have a css class on which the javascript operated to produces the zoom effect. The image is like:

<a id="big" href="source of image" class"classforzoom">     
    <img id="small" src="some small image on page" />
</a>

<script type="text/javascript">
    $(document).ready(function () {
        var options = {
           //some code here
        };

        $(".jqzoom").jqzoom(options);

    });
</script>

How do I programmatically do this on the onClick events on the 2 buttons?

This is what I am using in the head tag of my page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

Related toggleclass() method:

toggleClass: function(F,E) {
    if(typeof E!=="boolean") {
        E = !o.className.has(this,F)
    }
    o.className[E?"add":"remove"](this,F)
}

Answer 1

Did you check out the jQuery click method and then use the unbind method to remove an event from an object?

Answer 2

Also since you say you are using a css class for the zoom effect check out the toggleClass() method.