Results 1 to 3 of 3

Thread: Image pan and zoom from the center, anyone?

  1. #1
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image pan and zoom from the center, anyone?

    Hey guys, I found this nice script here and would like to use it. I would like however to be able to keep the image centered while zooming. Possible? Please see here: http://www.dynamicdrive.com/dynamici...magepanner.htm

    Kind regards,

    Ton

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 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[*/
    
    #div {
      position:absolute;left:300px;top:30px;width:500px;height:375px;border:solid red 1px;
    }
    
    #div IMG{
      width:500px;height:375px;
    }
    
    .but {
      position:absolute;z-Index:2;width:24px;height:24px;cursor:pointer;background-Repeat:no-repeat;cursor:pointer;
      opacity:.6; filter:alpha(opacity=60);
    }
    
    .up {
      left:445px;top:350px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Up1.gif);
    }
    
    .down {
      left:470px;top:350px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Down1.gif);
    }
    
    .message {   /* CSS for the message DIV element */
      position:absolute;z-Index:3;left:10px;top:10px;width:100px;height:30px;padding:5px;padding-Top:20px;background-Color:#CCFFFF;color:#0000FF;font-Size:12px;text-Align:center;
      opacity:.6; filter:alpha(opacity=60);
    }
    /*]]>*/
    </style></head>
    
    <body>
    
     <input id="b1" type="button" name="" value="Zoom In" onmouseup="zxcImagePanZoom.Zoom('div',0.1);" />
     <input id="b2" type="button" name="" value="Zoom Out" onmouseup="zxcImagePanZoom.Zoom('div',-0.1);" />
    
     <div id="div" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg" />
      <div class="up but" title="+ve" ></div>
      <div class="down but" title="+ve" ></div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Pan Zoom (02-Febuary-2013)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    //  The functional code size is 3.59K.
    
    // ****** Functional Code - NO NEED to Change
    
    var zxcImagePanZoom={
    
     init:function(o){
      var id=o.ID,p=document.getElementById(id),img=p?p.getElementsByTagName('IMG')[0]:false,cls=o.ButtonClass,mcls=o.MessageClass,z=o.ZoomBy,mz=o.MaximumZoom;
      if (img){
       var mcls=typeof(mcls)=='string'?mcls:false,z=typeof(z)=='number'?Math.abs(z):0.1,mz=typeof(mz)=='number'&&mz>1?mz:5,w=this.style(p,'width'),h=this.style(p,'height'),iw=img.width,ih=img.height,m=document.createElement('DIV'),reg=new RegExp(' '+cls+' '),els=p.getElementsByTagName('*'),n=0,b=[],z0=0
       p.style.overflow='hidden';
       img.style.position='absolute';
       img.style.width=Math.max(w,iw)+'px';
       img.style.height=Math.max(w,iw)/iw*ih+'px';
       iw=img.width,ih=img.height;
       img.style.left=(w-iw)/2+'px';
       img.style.top=(h-ih)/2+'px';
       m.style.position='absolute';
       m.style.visibility='hidden';
       if (mcls){
        m.className=mcls;
        p.appendChild(m);
       }
       for (;z0<els.length;z0++){
        if (reg.test(' '+els[z0].className+' ')){
         this.addevt(els[z0],'mouseup','Zoom',id,z*(n==0?1:-1));
         this.addevt(els[z0],'mouseup','Zoom',id,z*(n==0?1:-1));
         els[z0].style.visibility=n==0?'visible':'hidden';
         b[n]=els[z0];
         n++
         if (n==2){
          break;
         }
        }
       }
       o=this['zxc'+id]={
        p:p,
        img:img,
        m:m,
        mz:mz,
        b:b,
        w:w,
        h:h,
        iw:iw,
        ih:ih,
        lft:(w-iw)/2,
        top:(h-ih)/2,
        z:1,
        drag:false
       }
       this.addevt(o.p,'mousedown','down',o);
       this.addevt(document,'mouseup','up',o);
       this.addevt(document,'mousemove','move',o);
      }
     },
    
     Zoom:function(id,z){
      var o=this['zxc'+id],w,zw;
      if (o){
       w=o.iw*o.z;
       o.z=Math.min(Math.max(o.z+z,1),o.mz);
       zw=o.iw*o.z
       o.lft=Math.max((o.lft-o.w/2)*zw/w+o.w/2,-zw+o.w);
       o.top=Math.max((o.top-o.h/2)*zw/w+o.h/2,-o.ih*o.z+o.h);
       o.img.style.left=o.lft+'px';
       o.img.style.top=o.top+'px';
       o.img.style.width=zw+'px';
       o.img.style.height=o.ih*o.z+'px';
       o.b[0]?o.b[0].style.visibility=o.z<o.mz?'visible':'hidden':null;
       o.b[1]?o.b[1].style.visibility=o.z>1?'visible':'hidden':null;
       o.m.innerHTML='Zoom: '+o.z.toFixed(2);
       o.m.style.visibility='visible';
       clearTimeout(o.to);
       o.to=setTimeout(function(){ o.m.style.visibility='hidden'; },2000);
      }
     },
    
     down:function(o,p2,e){
      document.onselectstart=function(event){ window.event.returnValue=false; }
      o.mseXY=[e.clientX,e.clientY];
      o.lft=this.style(o.img,'left');
      o.top=this.style(o.img,'top');
      o.drag=o.img;
      return this.rtn(e);
     },
    
     move:function(o,p2,e){
      if (o.drag){
       var mse=[e.clientX,e.clientY];
       o.lft=Math.max(Math.min(o.lft+mse[0]-o.mseXY[0],0),-o.iw*o.z+o.w);
       o.top=Math.max(Math.min(o.top+mse[1]-o.mseXY[1],0),-o.ih*o.z+o.h);
       o.img.style.left=o.lft+'px';
       o.img.style.top=o.top+'px';
       o.mseXY=mse;
       return this.rtn(e);
      }
     },
    
     rtn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     up:function(o){
      if (o.drag){
       o.drag=false;
       document.onselectstart=null;
      }
     },
    
     addevt:function(o,t,f,p1,p2){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p1,p2,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p1,p2,e); });
      }
     },
    
     style:function(o,p){
      if (o.currentStyle){
       return parseInt(o.currentStyle[p.replace(/-/g,'')]);
      }
      return parseInt(document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     }
    
    
    }
    
     zxcImagePanZoom.init({
      ID:'div',               // the unique ID name of the image parent DIV.          (string)
      ButtonClass:'but',      // the common class name of the 'zoom' in/out elements. (string, default = inline event calls)
      MessageClass:'message', // the class name of the 'zoom' message DIV element.    (string, default = no message)
      ZoomBy:.1,              // the 'zoom' in/out factor.                            (number, default = 0.1)
      MaximumZoom:5           // the maximum 'zoom' in.                               (number, default = 5)
     });
    
    
    /*]]>*/
    </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
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey Vic, thank you so much for your swift reply. However, I already implemented the DYnamicdrive image panner: http://www.dynamicdrive.com/dynamici...magepanner.htm and I like the smooth zooming and panning. Whet I am looking for is a bit of modifying the existing code to zoom from the center.

    Thank you an advance,

    Ton

Similar Threads

  1. image quality on zoom...
    By magnetik12 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-25-2012, 08:44 PM
  2. Image rollover with power zoom shows wrong image
    By GrahamJBrown in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-14-2012, 03:05 PM
  3. image zoom problems
    By markyboy53 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-05-2011, 08:31 PM
  4. image zoom on hover
    By Chadi in forum JavaScript
    Replies: 13
    Last Post: 05-16-2007, 10:54 PM
  5. image zoom script
    By patrinos in forum JavaScript
    Replies: 4
    Last Post: 05-04-2005, 06:42 AM

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
  •