title: jQuery - Destroy and reinitialize plugin on click
body: <p>I'm using the following zoom plugin on my site: <a href="http://www.elevateweb.co.uk/image-zoom" rel="nofollow">http://www.elevateweb.co.uk/image-zoom</a></p>
  
  <p>It works using mouseenter and mouseleave events. I'm trying to make this work with click. Click to zoom and unzoom(?) and also unzoom on mouseleave.</p>
  
  <p>The click to initialize works with the code below but I'm looking to add destroy or stop the function on second click or mouseleave OR even click to a new slide. (It's inside a carousel slider) Does anyone have any thoughts?</p>
  
  <pre><code>jQuery('span.zoom img').bind('click',function(){
      jQuery("span.zoom img").elevateZoom({
          zoomType: "inner",
          cursor: "crosshair",
          responsive: true,
          scrollZoom: true
      });
  });
  </code></pre>
  
  <p>EDIT: I've scrapped the above situation and created my own zoom. The movement is giving me trouble now. Link: <a href="http://bigideaadv.com/pic_site/?p=95" rel="nofollow">http://bigideaadv.com/pic_site/?p=95</a></p>
  
  <pre><code>    jQuery("div.zoom2 img.rsImg2").mousemove(function(e) {
          var zoom = jQuery(this);
          var position = zoom.position();
  
          //console.log(position);
  
          jQuery(".rsImg2").css({"left" : position.left, "top" : position.top});
  
          // the first parameter (e) is automatically assigned an event object
  
          //TODO: Uncomment
          var parentOffset = jQuery(this).parent().offset();
          //or $(this).offset(); if you really just want the current element's offset
          var relX = e.pageX - parentOffset.left;
          var relY = e.pageY - parentOffset.top;
  
          jQuery(".rsImg2").css({"left" : relX, "top" : relY});
      });
  </code></pre>