Want to make manify glass stay on image and draggable but not to follow the mouse

**rathna** · 10-28-2012, 02:48 AM

1) Script Title:
Image Power Zoomer v1.1

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...htm#largeimage

3) Describe problem:
I would like the magnify glass to be draggable or when it is left click, the magnify glass stay where it was and not to follow the pointer. Is it possible to add this feature.

What's the best way of achieving this?

Any helps is appreciated.

**vwphillips** · 10-28-2012, 07:29 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
#mag1 {
  position:absolute;left:100px;top:100px;border:solid red 1px
}

.window1 {
  position:absolute;z-Index:101;border:solid red 1px;cursor:crosshair;text-Align:center;
}


  /*]]>*/
  </style>
</head>

<body>
<input type="button" name="" value="Zoom +ve" onmouseup="zxcImageViewerV.Zoom('mag1',.5);"/>
<input type="button" name="" value="Zoom -ve" onmouseup="zxcImageViewerV.Zoom('mag1',-.5);"/>

 <img id="mag1" class="mag" alt="image" src="http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg" width="300" />

<script type="text/javascript">
/*<![CDATA[*/
// Image Viewer V (28-October-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


zxcImageViewerV={

 init:function(o){
  var id=o.ImageID,img=document.getElementById(id),m=o.MagnifyBy,m=typeof(m)=='number'&&m>1?m:1.5,msrc=o.MagnifySRC,z=o.Zoom,z=typeof(z)=='object'&&z.constructor==Array&&typeof(z[0])=='number'&&typeof(z[1])=='number'?z.sort():[m,m],w=img.width,h=img.height,win=document.createElement('DIV'),c=document.createElement('IMG');
  c.style.position='absolute';
  c.style.width=w*m+'px';
  c.style.height=h*m+'px';
  c.src=typeof(msrc)=='string'?msrc:img.src;
  win.className=o.WindowClass;
  win.style.position='absolute';
  win.style.overflow='hidden';
  win.style.visibility='hidden';
  win.style.left='-3000px';
  win.style.top='-3000px';
  win.style.width=w/m+'px';
  win.style.height=h/m+'px';
  win.appendChild(c);
  document.body.appendChild(win);
  o=this['zxc'+id]={
   img:img,
   win:win,
   c:c,
   m:m,
   w:w,
   h:h,
   z:z,
   xy:[-3000,-3000],
   drag:false
  }
  this.Zoom(id,0);
  this.addevt(document,'mousemove','move',o);
  this.addevt(document,'mouseup','up',o);
  this.addevt(c,'mousedown','down',o);
 },

 Zoom:function(id,ud){
  var o=this['zxc'+id];
  if (o&&typeof(ud)=='number'&&(o.z||ud==0)){
   o.m=Math.min(Math.max(o.m+=ud,o.z[0]),o.z[1]);
   o.ww=o.w/o.m/2;
   o.wh=o.h/o.m/2;
   o.cw=o.w*o.m;
   o.ch=o.h*o.m;
   o.win.style.width=o.w/o.m+'px';
   o.win.style.height=o.h/o.m+'px';
   o.c.style.width=o.w*o.m+'px';
   o.c.style.height=o.h*o.m+'px';
   this.setxy(o,o.xy,this.pos(o.img));
  }
 },

 move:function(e,o){
  var xy=this.mse(e),p=this.pos(o.img),ud=xy[0]>p[0]-5&&xy[0]<p[0]+o.w+5&&xy[1]>p[1]-5&&xy[1]<p[1]+o.h+5,x,y;
  o.win.style.visibility=ud?'visible':'hidden';
  if (!o.drag&&o.win.style.visibility=='hidden'){
   o.win.style.left=p[0]+(o.w-o.ww*2)/2+'px';
   o.win.style.top=p[1]+(o.h-o.wh*2)/2+'px';
   o.c.style.left=-(o.cw-o.ww*2)/2+'px';
   o.c.style.top=-(o.ch-o.wh*2)/2+'px';
  }
  if (ud&&o.drag){
   this.setxy(o,xy,p);
   o.xy=xy;
  }
  return this.dragrtn(e);
 },

 setxy:function(o,xy,p){
   x=Math.min(Math.max(parseInt(o.win.style.left)+xy[0]-o.xy[0],p[0]-o.ww),p[0]+o.w-o.ww);
   y=Math.min(Math.max(parseInt(o.win.style.top)+xy[1]-o.xy[1],p[1]-o.wh),p[1]+o.h-o.wh);
   o.win.style.left=x+'px';
   o.win.style.top=y+'px';
   o.c.style.left=-(x-p[0]+o.ww)*o.m+o.ww+'px';
   o.c.style.top=-(y-p[1]+o.wh)*o.m+o.wh+'px';
 },

 dragrtn:function(e){
  if(e.stopPropagation){
   e.stopPropagation();
  }
  if (!window.event){
   e.preventDefault();
  }
  e.cancelBubble=true;
  e.cancel=true;
  e.returnValue=false;
  return false;
 },

 down:function(e,o){
  o.xy=this.mse(e)
  o.drag=true;
  return this.dragrtn(e);
 },

 up:function(e,o){
  o.drag=false;
 },

 mse:function(e){
  if (window.event){
   var docs=[document.body.scrollLeft,document.body.scrollTop];
   if (!document.body.scrollTop){
    docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+docs[0],e.clientY+docs[1]];
  }
  return [e.pageX,e.pageY];
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
  }
 }




}



zxcImageViewerV.init({
 ImageID:'mag1',                    // the unique ID name of the featured image.                             (string)
 WindowClass:'window1',             // the class name of the image window.                                   (string)
 MagnifyBy:3,                        //(optional) the magnification of the viewer image.                     (number, mimimum = >1, default = 1.5)
 MagnifySRC:'http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg',  //(optional) the src of the magnified image.  (string, default = the original image src)
 Zoom:[2,5]                        //(optional) minimum and maximum zoom.                                    (array, default = no zoom)
                                    //           field 0 = the minimum zoom.   (number)
                                    //           field 1 = the maximum zoom.   (number)
});

/*]]>*/
</script>

</body>

</html>

**rathna** · 10-31-2012, 07:55 AM

With the large image, the magnify glass keep disappear when drag toward top left and can not get the magnify glass to set it smaller. It seem the magnify glass is proportional to the image size.

Is it possible to modify the Image Power Zoomer v1.1 so that the magnify glass is draggable and always stay visible when the mouse move out of the image.