Results 1 to 2 of 2

Thread: pan and zoom

  1. #1
    Join Date
    Dec 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry pan and zoom

    Can someone help me out with a script to pan and zoom exactley like this:

    http://www.fly53store.com/product/1539/option/2206

    There is a script on this page:

    http://www.dynamicdrive.com/dynamici...uredzoomer.htm

    but I need one that shows the image in a larger size first before zooming and panning on the image.

    ANY HELP IS MUCH APPRECIATED

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 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[*/
    
    .container {
      position:absolute;overflow:hidden;left:300px;top:100px;width:300px;height:200px;border:solid red 1px;cursor:crosshair;
    }
    
    
    .thumb {
      left:100px;top:100px;width:100px;height:75px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
     <img class="thumb SRC:http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg MagnifyTo:500" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="thumb" />
     <img class="thumb " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="thumb" />
    
     <div id="c1" class="container">
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image View Pan (24-December-2011)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    //  The functional code size is 3.08K
    
    // ****** Functional Code - NO NEED to Change
    
    function zxcImageViewPan(o){
     var reg=new RegExp('\\b'+o.CommonClass+'\\b'),imgs=document.getElementsByTagName('*'),oo,cls,i,z0=0,z0a;
     for (;z0<imgs.length;z0++){
      if(reg.test(imgs[z0].className)){
       oo={};
       cls=imgs[z0].className.split(' ');
       for (z0a=0;z0a<cls.length;z0a++){
        i=cls[z0a].indexOf(':');
        if (i>1){
         oo[cls[z0a].substring(0,i).toLowerCase()]=cls[z0a].substring(i+1);
        }
       }
       new zxcImageViewPanOOP(imgs[z0],o,oo);
      }
     }
    }
    
    
    function zxcImageViewPanOOP(img,o,oo){
     var oop=this,c=document.getElementById(oo.containerid)||document.getElementById(o.ContainerID),w=img.width,mag=oo.magnifyby,mag=isFinite(mag)?mag*1:o.MagnifyBy,to=oo.magnifyto,to=max=isFinite(to)?to:o.MagnifyTo,max=isFinite(to)&&!isFinite(oo.magnifyby)?to*1:w*(typeof(mag)=='number'?mag:5),ms=oo.duration,ms=isFinite(ms)?ms*1:o.Duration
     img.parentNode.removeAttribute('href');
     oop.img=img;
     oop.cimg=document.createElement('IMG');
     oop.src=oo.src||img.src;
     oop.c=c;
     oop.max=max;
     oop.to=null;
     oop.ms=typeof(ms)=='number'?ms:1000;
     img.onmouseup=function(){ oop.load(true); }
     c.onmousemove=function(event){ oop.move(event); }
    }
    
    zxcImageViewPanOOP.prototype={
    
     load:function(r){
      var oop=this,c=oop.c,lst=c.getElementsByTagName('IMG')[0],cimg=oop.cimg,img=this.img,max=this.max;
      if (r&&lst&&lst.scr!=oop.src){
       c.removeChild(lst);
      }
      if (!cimg.src){
       clearTimeout(oop.to);
       cimg.src=oop.src;
       oop.preload(cimg);
      }
      else {
       cimg.width=max;
       cimg.height=max*img.height/img.width;
       cimg.style.position='absolute';
       cimg.style.left=(c.offsetWidth-max)/2+'px';
       cimg.style.top=(c.offsetHeight-cimg.height)/2+'px';
       oop.animate(cimg,0,100,new Date());
       c.appendChild(cimg);
      }
     },
    
     preload:function(cimg){
      var oop=this;
      if (cimg.width<50){
       oop.to=setTimeout(function(){oop.preload(cimg); },500);
      }
      else {
       oop.load();
      }
     },
    
     move:function(e){
      var oop=this,c=oop.c,cw=c.offsetWidth,ch=c.offsetHeight,img=c.getElementsByTagName('IMG')[0],p=oop.pos(c),m=oop.mse(e),x=(m[0]-p[0])/cw,y=(m[1]-p[1])/ch;
      if (img){
       var mx=-img.width+cw,my=-img.height+ch;
       img.style.left=Math.min(Math.max(mx*x,mx),0)+'px';
       img.style.top=Math.min(Math.max(my*y,my),0)+'px';
      }
     },
    
     animate:function(obj,f,t,srt){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/oop.ms*ms+f;
      if (isFinite(now)&&now>=0){
       obj.style.filter='alpha(opacity='+now+')';
       obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
      }
      if (ms<oop.ms){
       setTimeout(function(){ oop.animate(obj,f,t,srt); },10);
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     mse:function(e){
      if (window.event){
       var e=window.event,d=document,docs=[d.body.scrollLeft,d.body.scrollTop];
       if (!d.body.scrollTop){
        docs=[d.documentElement.scrollLeft,d.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     }
    
    }
    
    //new zxcImageViewPanOOP({
    // ContainerID:'c1'
    //});
    
    zxcImageViewPan({
     CommonClass:'thumb', // the common class name of the images to magnify.           (string)
     ContainerID:'c1',    // the unique ID mame of the magnified image parent DIV.     (string)
     // Default Options(see Note 1)
     MagnifyBy:5,         //(optional) magnification factor of the magnified image.    (number, default = 5)
     MagnifyTo:400,       //(optional) explicit width of the magnified image.          (number, default = 3)
     Duration:1000        //(optional) the duration of the animation, in milliseconds. (number, default = 1000)
    });
    
    // ** Note 1
    //  Options declared in the image class name will have priority over the initialization Default Options
    //  and may include additional the option:
    //   SRC:WinterPalace.jpg             (where the src of the magnified image is different to the original image)
    
    
    /*]]>*/
    </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/

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
  •