title: Bind a jquery image zoom effect to onclick
body: <p>I'm using this plugin to enable an image zoom on my site:</p>
  
  <p><a href="http://www.elevateweb.co.uk/image-zoom/" rel="nofollow">http://www.elevateweb.co.uk/image-zoom/</a></p>
  
  <p>I modified the code so that the magnifying glass only appears when you click the image (the mouse cursor is a magnifying glass when you hover over the image to suggest that you can click to zoom). The code looks like the following:</p>
  
  <pre><code>    $("#mainimage").click(function() {
      $("#mainimage").elevateZoom({
          zoomType: "lens",
          lensShape: "round",
          lensSize: 300
          });
      });
  </code></pre>
  
  <p>This code works fine. But what I'd like to do is also remove the zoom effect on click. Any code I try and write doesn't work... Any suggestions?</p>
  
  <p>Thanks!</p>
  
  <p>EDIT:</p>
  
  <p>I found this github note that seems to suggest there's a changeState function:</p>
  
  <p><a href="https://github.com/elevateweb/elevatezoom/commit/81c2cc4946f6bebc33c0d8e804b046b36fa1bc61" rel="nofollow">https://github.com/elevateweb/elevatezoom/commit/81c2cc4946f6bebc33c0d8e804b046b36fa1bc61</a></p>
  
  <p>But I'm having trouble using it without documentation...</p>
  
  <p>Right now I have something like this (just to test it):</p>
  
  <pre><code>    $("#mainimage").click(function() {
      $("#mainimage").elevateZoom({
          zoomType: "lens",
          lensShape: "round",
          lensSize: 300
      });
  });
  
  
  
  $('.productbioimage').click(function(){
      var ez =   $('#mainimage').data('elevateZoom');    
      ez.changeState('disable');
  });
  </code></pre>
  
  <p>This seems to work fine - when I click the image I get the zoom function, when I click this other (random) div it destroys the zoom function. But I can't figure out how to toggle the enable/disable changeState function on click of the image?</p>
  
  <p>Thanks!</p>