Results 1 to 3 of 3

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

  1. #1
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I try the code with large image it doesn't work well.

    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.

Similar Threads

  1. Make modal not-draggable + assign short cuts
    By Rodekode in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-25-2009, 07:15 PM
  2. Replies: 2
    Last Post: 06-01-2008, 07:15 PM
  3. Follow mouse script gone bad...
    By pcbrainbuster in forum JavaScript
    Replies: 13
    Last Post: 04-19-2007, 07:14 PM
  4. Drop-in content box: How to make it draggable?
    By uliss in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-13-2006, 03:31 AM
  5. Open iframe from link, then make it draggable
    By bleck in forum JavaScript
    Replies: 4
    Last Post: 12-11-2005, 04:30 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •