how to deactivate the jqzoom

how to deactivate the jqzoom

Im using jqzoom with carousel gallery, i would like to make a link which deactivates the jqzoom ie 'deactivate zoom' but im having alot of trouble, any help would be amazing

I have highlighted what I have tried in green 

Here is my code

JQUERY

jquery.jqzoom1.0.2.js 
  1. jquery.jqzoom1.0.2.js (function($) { $.fn.jqueryzoom = function(options) { var settings = { xzoom: 200, //zoomed width default width yzoom: 200, //zoomed div default width offset: 10, //zoomed div default offset position: "right", //zoomed div default position,offset position is to the right of the image lens: 1, //zooming lens over the image,by default is 1; preload: 1 }; if (options) { $.extend(settings, options); } var noalt = ''; $(this).hover(function() { var imageLeft = $(this).offset().left; var imageTop = $(this).offset().top; var imageWidth = $(this).children('img').get(0).offsetWidth; var imageHeight = $(this).children('img').get(0).offsetHeight; noalt = $(this).children("img").attr("alt"); var bigimage = $(this).children("img").attr("longdesc"); $(this).children("img").attr("alt", ''); if ($("div.zoomdiv").get().length == 0) { $(this).after("<div class='zoomdiv'><img class='bigimg' src='" + bigimage + "'/></div>"); $(this).append("<div class='jqZoomPup'>&nbsp;</div>"); } if (settings.position == "right") { if (imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width) { leftpos = imageLeft - settings.offset - settings.xzoom; } else { leftpos = imageLeft + imageWidth + settings.offset; } } else { leftpos = imageLeft - settings.xzoom - settings.offset; if (leftpos < 0) { leftpos = imageLeft + imageWidth + settings.offset; } } $("div.zoomdiv").css({ top: imageTop, left: leftpos }); $("div.zoomdiv").width(settings.xzoom); $("div.zoomdiv").height(settings.yzoom); $("div.zoomdiv").show(); if (!settings.lens) { $(this).css('cursor', 'crosshair'); } $(document.body).mousemove(function(e) { mouse = new MouseEvent(e); /*$("div.jqZoomPup").hide();*/ var bigwidth = $(".bigimg").get(0).offsetWidth; var bigheight = $(".bigimg").get(0).offsetHeight; var scaley = 'x'; var scalex = 'y'; if (isNaN(scalex) | isNaN(scaley)) { var scalex = (bigwidth / imageWidth); var scaley = (bigheight / imageHeight); $("div.jqZoomPup").width((settings.xzoom) / (scalex * 1)); $("div.jqZoomPup").height((settings.yzoom) / (scaley * 1)); if (settings.lens) { $("div.jqZoomPup").css('visibility', 'visible'); } } xpos = mouse.x - $("div.jqZoomPup").width() / 2 - imageLeft; ypos = mouse.y - $("div.jqZoomPup").height() / 2 - imageTop; if (settings.lens) { xpos = (mouse.x - $("div.jqZoomPup").width() / 2 < imageLeft) ? 0 : (mouse.x + $("div.jqZoomPup").width() / 2 > imageWidth + imageLeft) ? (imageWidth - $("div.jqZoomPup").width() - 2) : xpos; ypos = (mouse.y - $("div.jqZoomPup").height() / 2 < imageTop) ? 0 : (mouse.y + $("div.jqZoomPup").height() / 2 > imageHeight + imageTop) ? (imageHeight - $("div.jqZoomPup").height() - 2) : ypos; } if (settings.lens) { $("div.jqZoomPup").css({ top: ypos, left: xpos }); } scrolly = ypos; $("div.zoomdiv").get(0).scrollTop = scrolly * scaley; scrollx = xpos; $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex; }); }, function() { $(this).children("img").attr("alt", noalt); $(document.body).unbind("mousemove"); if (settings.lens) { $("div.jqZoomPup").remove(); } $("div.zoomdiv").remove(); }); count = 0; if (settings.preload) { $('body').append("<div style='display:none;' class='jqPreload" + count + "'>mymyty</div>"); $(this).each(function() { var imagetopreload = $(this).children("img").attr("longdesc"); var content = jQuery('div.jqPreload' + count + '').html(); jQuery('div.jqPreload' + count + '').html(content + '<img src=\"' + imagetopreload + '\">'); }); } } })(jQuery); function MouseEvent(e) { this.x = e.pageX; this.y = e.pageY; }

HTML
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  3. <html>
  4. <head>
  5. <link rel="stylesheet" type="text/css" href="script/css/jquery.jcarousel.css" />
  6. <link rel="stylesheet" type="text/css" href="script/css/jqzoom.css" />
  7. <script type="text/javascript" src="script/js/jquery-1.3.2.min.js"></script>
  8. <script type="text/javascript" src="script/js/jquery.jqzoom1.0.2.js"></script>
  9. <script type="text/javascript" src="script/js/jquery.jcarousel.js"></script>
  10. <script type="text/javascript">
  11. $(document).ready(function() {
  12.  
  13.    $("#mycarousel").jcarousel({initCallback:mycarousel_initCallback});
  14.    $(".jqzoom").jqueryzoom({
  15. xzoom:500,
  16. yzoom:500,
  17. offset:10,
  18. position:"right",
  19.         preload:1,
  20. lens:1
  21. });

  23. });

  25. function mycarousel_initCallback(carousel){
  26. $("#mycarousel li").click(function(){
  27. var JQ_img = $("img", this);
  28. var image_name = JQ_img.attr("name");
  29. $("#_middleImage").attr("src", "images/middle/" + image_name).attr("longdesc", "images/big/" + image_name); 
  30. $(this).siblings().each(function(){
  31. $("img", this).removeClass().addClass("curr_base");
  32. })
  33. JQ_img.addClass("cur_on");
  34. })
  35. };
  36. </script>
  37.   <script type="text/javascript">    
  38.        $("a#deactivate").click(function(event)
  39.           {
  40. $(this).children("img").attr("alt", noalt);
  41. $(document.body).unbind("mousemove");

  43. $("div.zoomdiv").remove();
  44.             });
  45.   </script>

  47. <title>TITLE</title>
  48. </head>
  49. <body onLoad="init()">
  50. <div id="loading">
  51. <img src="images/logo_load.gif" border=0>
  52. </div>
  53. <script type="text/javascript">
  54.  var ld=(document.all);
  55.   var ns4=document.layers;
  56.  var ns6=document.getElementById&&!document.all;
  57.  var ie4=document.all;
  58.   if (ns4)
  59.   ld=document.loading;
  60.  else if (ns6)
  61.   ld=document.getElementById("loading").style;
  62.  else if (ie4)
  63.   ld=document.all.loading.style;
  64.   function init()
  65.  {
  66.  if(ns4){ld.visibility="hidden";}
  67.  else if (ns6||ie4) ld.display="none";
  68.  }
  69.  </script>

  71. <div id="main">
  72. <div class="nav">
  73. <img src="images/text_logo.png"><br /><br />
  74. PRESS | <a href=biography.html">BIOGRAPHY</a> | <a href="contact.html">CONTACT</a>
  75. </div>
  76. <div id="BigImage" class="jqzoom">
  77. <img id="_middleImage" src="images/middle/VogueHJSept09Vol3.jpg" longdesc="images/big/VogueHJSept09Vol3.jpg"/>
  78.   </div>


  81. <table> 
  82.  <tr>
  83.     <td>
  84.      <div class= "header">
  85. Vogue Homme Japan A/W 2009-2010
  86. </div>
  87.     <ul id="mycarousel" class="jcarousel-skin-tango">
  88.    <li><img class="curr_base" src="images/small/VogueHJSept09Vol3.jpg" name="VogueHJSept09Vol3.jpg"/></li>
  89.         <li><img class="curr_base" src="images/small/VogueHJSept09Vol3.2.jpg" name="VogueHJSept09Vol3.2.jpg"/></li>
  90.         <li><img class="curr_base" src="images/small/VogueHJSept09Vol3.3.jpg" name="VogueHJSept09Vol3.3.jpg"/></li>
  91.         <li><img class="curr_base" src="images/small/VogueHJSept09Vol3.4.jpg" name="VogueHJSept09Vol3.4.jpg"/></li>
  92.         </ul>
  93.   </td>
  94.  </tr>
  95.   <tr>
  96.    <td>
  97.    <ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal" >
  98.    <li><img class="curr_base" src="images/small/VogueHJSept09Vol3.5.jpg" name="VogueHJSept09Vol3.5.jpg"/></li>
  99.        </ul>
  100.        <div>
  101.        <a id="deactivate" href="#">Deactivate Zoom</a> 
  102.        </div>
  103.      </td>
  104. </tr>
  105. </table>

  107. </div>
  108. </body>
  109. </html>