jQuery Simple ZoomGlass plugin


/ Published in: JavaScript
Save to your folder(s)

This is a zoom glass effect. Simply download jQuery and the plugin and apply the code as described in http://cloudgen.w0ng.hk/jquery/simple.zoomGlass.php
You can found the sample in the page, too.


Copy this code and paste it in your HTML
  1. <script type="text/javascript">
  2. (function($){
  3. function parseCSS(obj,css){
  4. var r=0;
  5. obj.css(css).replace(/\b(\d+)px\b/,function(s,t){r=parseInt(t)});
  6. return r;
  7. }
  8. function Lens(target,width,height,callBack){
  9. if(target){
  10. var w=width||50,h=height||50;
  11. this.callBack=(typeof callBack=="function")?callBack:function(){};
  12. this.target=$(target);
  13. this.disabled=false;
  14. this.callBack=callBack||function(){};
  15. this.anchor=this.target.wrap(document.createElement("a")).closest("a").data("Lens",this)
  16. .unbind("mouseover").unbind("mouseout").unbind("mousemove")
  17. .hover(function(e){
  18. $(this).data("Lens").show(e)
  19. },function(){
  20. $(this).data("Lens").hide()
  21. }).mousemove(function(e){
  22. $(this).data("Lens").show(e)
  23. });
  24. var jNode=$('<div style="background-color:#FFF;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);position:absolute;z-index:900;'
  25. +'cursor:crosshair;"></div>').css({width:w,height:h}).appendTo(this.anchor).hide();
  26. this.jNode=jNode.css({top:this.target.offset().top,left:this.target.offset().left});
  27. this.offset={top:this.target.offset().top+parseCSS(this.target,'borderTopWidth'),left:this.target.offset().left+parseCSS(this.target,'borderLeftWidth'),width:w,height:h};
  28. this.adjustedTarget={top:this.target.offset().top+parseCSS(this.target,'borderTopWidth'),left:this.target.offset().left+parseCSS(this.target,'borderLeftWidth')}
  29. this.target.data("Lens",this);
  30. }
  31. }
  32. Lens.prototype.remove=function(){
  33. this.jNode.remove();
  34. };
  35. Lens.prototype.show=function(e){
  36. if(!this.disabled){
  37. this.mouseX=e.pageX;
  38. this.mouseY=e.pageY;
  39. this.offset.left=parseInt(this.mouseX-this.offset.width/2);
  40. this.offset.left=(this.offset.left<this.adjustedTarget.left)?this.adjustedTarget.left:this.offset.left;
  41. this.offset.left=(this.offset.left>this.adjustedTarget.left+this.target.width()-this.offset.width)
  42. ?this.adjustedTarget.left+this.target.width()-this.offset.width:this.offset.left;
  43. this.offset.top=parseInt(this.mouseY-this.offset.height/2);
  44. this.offset.top=(this.offset.top<this.adjustedTarget.top)?this.adjustedTarget.top:this.offset.top;
  45. this.offset.top=(this.offset.top>this.adjustedTarget.top+this.target.height()-this.offset.height)
  46. ?this.adjustedTarget.top+this.target.height()-this.offset.height:this.offset.top;
  47. this.jNode.css({top:this.offset.top,left:this.offset.left});
  48. this.relative={top:parseInt(this.offset.top-this.adjustedTarget.top),left:parseInt(this.offset.left-this.adjustedTarget.left)};
  49. this.jNode.show();
  50. if(typeof this.callBack=="function") this.callBack.apply(this.target);
  51. }
  52. };
  53. Lens.prototype.hide=function(){
  54. this.jNode.hide();
  55. };
  56. Lens.prototype.disable=function(){
  57. this.disabled=true;
  58. };
  59. Lens.prototype.enable=function(){
  60. this.disabled=false;
  61. };
  62. $.fn.addLens=function(width,height,callBack){
  63. var w,h,c;
  64. if(typeof width=="function") c=width;
  65. else c=(typeof callBack=="function")?callBack:function(){};
  66. w=(typeof width!="number") ?100:width;
  67. h=(typeof height!="number") ?100:height;
  68. new Lens(this,w,h,c);
  69. };
  70. $.fn.showLens=function(){
  71. this.data("Lens").show();
  72. };
  73. $.fn.hideLens=function(){
  74. this.data("Lens").hide();
  75. };
  76. $.fn.removeLens=function(){
  77. this.data("Lens").remove();
  78. };
  79. function ClippedImage(target,src,width,height,top,left){
  80. this.clipped={};
  81. this.clipped.left=left||0;
  82. this.clipped.top=top||0;
  83. this.clipped.width=width||100;
  84. this.clipped.height=height||100;
  85. this.src=src;
  86. this.target=$(target).data("ClippedImage",this).css({overflow:"hidden",width:width+"px",height:height+"px"}).
  87. append('<div style="position:relative;left:'+(0-left)+'px;top:'+(0-top)+'px;"><img border="0" src="'+this.src+'"/></div>');
  88. return this
  89. }
  90. ClippedImage.prototype.clipTo=function(top,left,width,height){
  91. this.clipped.left=left||this.clipped.left;
  92. this.clipped.top=top||this.clipped.top;
  93. this.clipped.width=width||this.clipped.width;
  94. this.clipped.height=height||this.clipped.height;
  95. this.target.find("div").css({left:(0-this.clipped.left)+"px",top:(0-this.clipped.top)+"px",
  96. width:this.clipped.width+"px",height:this.clipped.height+"px"});
  97. return this
  98. }
  99. $.fn.addZoomGlass=function(obj,largeImg_url,width,height,clippedImageWidth,clippedImageHeight){
  100. var w,h;
  101. w=(typeof width!="number") ?50:width;
  102. h=(typeof height!="number") ?50:height;
  103. var h_scale=clippedImageWidth*1.0/width;
  104. var v_scale=clippedImageHeight*1.0/height;
  105. var ci=$(obj).addClippedImage(largeImg_url,clippedImageWidth,clippedImageHeight).data("ClippedImage");
  106. ci.target.find("img").width(parseInt(this.width()*h_scale)).height(parseInt(this.height()*v_scale));
  107. new Lens(this,w,h,function(){
  108. var left=parseInt($(this).data("Lens").relative.left*h_scale);
  109. var top=parseInt($(this).data("Lens").relative.top*v_scale);
  110. ci.clipTo(top,left)
  111. });
  112. };
  113. $.fn.addClippedImage=function(src,width,height,top,left){
  114. new ClippedImage(this,src,width,height,top,left);
  115. return this
  116. }
  117. $.fn.clipImageTo=function(top,left,width,height){
  118. this.data("ClippedImage").clipTo(top,left,width,height);
  119. return this
  120. }
  121. $.fn.addLens=function(width,height,callBack){
  122. var w,h,c;
  123. if(typeof width=="function") c=width;
  124. else c=(typeof callBack=="function")?callBack:function(){};
  125. w=(typeof width!="number") ?50:width;
  126. h=(typeof height!="number") ?50:height;
  127. new Lens(this,w,h,c);
  128. };
  129. $.fn.showLens=function(){
  130. this.data("Lens").show();
  131. };
  132. $.fn.hideLens=function(){
  133. this.data("Lens").hide();
  134. };
  135. $.fn.removeLens=function(){
  136. this.data("Lens").remove();
  137. };
  138. })(jQuery);
  139. </script>

URL: http://cloudgen.w0ng.hk/jquery/simple.zoomGlass.php

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.