Zoom image issues

**jundo12** · 05-07-2014, 02:47 PM

I'm struggling with an old image zoom script that i'd like to use simply because it has a mouseover smooth scroll into the pic, instead of a click click click.
the problem is, it doesn't center itself so ends up zooming to the upper left hand corner of the image. it also doesn't allow me
to specify the starting dimensions of the image, but rather the maximum allowable dimensions when fully zoomed, this results in the starting image being way too big for the screen. my zoom target is actually the emerald green door in the image.

here's the script working and the problem:

http://thelivingmoon.com/undomiel/interface/earth/hangarmaledefault.html

**vwphillips** · 05-07-2014, 05:36 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[*/
.parent {
  position:absolute;left:0px;top:0px;width:100%;height:800px;border:solid red 1px;
}

#z1 {
  position:absolute;z-Index:0;left:0px;top:0px;
}

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

<body>
 <div class="parent" >
  <img id="z1" src="http://thelivingmoon.com/undomiel/interface/earth/hangar.jpg" />
<img src="http://thelivingmoon.com/undomiel/interface/earth/down2.png" style="position:relative;z-Index:101;" onmouseover="zxcZoomImage.Zoom('z1',true);" onmouseout="zxcZoomImage.Zoom('z1');" />
<img src="http://thelivingmoon.com/undomiel/interface/earth/up2.png" style="position:relative;z-Index:101;" onmouseover="zxcZoomImage.Zoom('z1',false);" onmouseout="zxcZoomImage.Zoom('z1');" />
 </div>


<script type="text/javascript">
/*<![CDATA[*/
// Zoom Image (07-May-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/StdImages/
var zxcZoomImage={

 Zoom:function(id,ud){
  var o=this['zxc'+id];
  if (o){
   var t=o.a[0][ud===true?3:ud===false?2:4],ms=o.ms*Math.abs((t-o.a[0][4])/(o.a[0][3]-o.a[0][2]))+10;
   this.animate(o,o.a[0],o.a[0][4],t,new Date(),ms);
   this.animate(o,o.a[1],o.a[1][4],o.a[1][ud===true?3:ud===false?2:4],new Date(),ms);
   this.animate(o,o.a[2],o.a[2][4],o.a[2][ud===true?3:ud===false?2:4],new Date(),ms);
   this.animate(o,o.a[3],o.a[3][4],o.a[3][ud===true?3:ud===false?2:4],new Date(),ms);
   ud===true||ud===false?o.ud=ud:null;
  }
 },

 init:function(o){
  var id=o.ImageID,z=o.Zoom,ms=o.Animate,i=document.getElementById(id),p=i?i.parentNode:null;
  if (p){
   o.id=id;
   o.i=i;
   o.p=p;
   o.z=typeof(z)=='number'&&z>1?z:2;
   o.ms=typeof(ms)=='number'&&ms>100?ms:1000;
   o.ni=new Image();
   o.ni.src=i.src;
   this.load(o);
  }
 },

 Resize:function(id){
  var o=this['zxc'+id];
  if (o){
   o.a[2][3]=-o.cx*o.z+o.p.offsetWidth/2;
   o.a[3][3]=-o.cy*o.z+o.p.offsetHeight/2;
   this.Zoom(o.id,o.ud);
  }
 },

 load:function(o){
  var oop=this,w=o.ni.width,h=o.ni.height;
  clearTimeout(o.to);
  if (w<40){
   return o.to=setTimeout(function(){ oop.load(o); },100);
  }
  o.cx=typeof(o.CenterX)=='number'?o.CenterX:w/2;
  o.cy=typeof(o.CenterY)=='number'?o.CenterY:h/2;
  o.a=[[o.i,'width',w,w*o.z,w],[o.i,'height',h,h*o.z,h],[o.i,'left',o.i.offsetLeft,0,o.i.offsetLeft],[o.i,'top',o.i.offsetTop,0,o.i.offsetTop]];
  this['zxc'+o.id]=o;
  this.Resize(o.id);
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[5]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[4]=Math.max(f<0||t<0?n:0,n);
   a[0].style[a[1]]=a[4]+'px';
  }
  if (ms<mS){
   a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[4]=t;
   a[0].style[a[1]]=t+'px';
  }
 }


}

zxcZoomImage.init({
 ImageID:'z1',
 Zoom:2,
 Animate:5000,
 CenterX:500,
 CenterY:670
});

window.onresize=function(){
 zxcZoomImage.Resize('z1');
}
/*]]>*/
</script>

</body>

</html>

**jundo12** · 05-07-2014, 09:46 PM

thank you!

is there a way to put the buttons centered towards the bottom of the page without losing the zoom function? also, is it possible to make the image be 100% width and height so it scales in the window to the viewer's resolution?

**vwphillips** · 05-08-2014, 12:15 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[*/
.parent {
  position:absolute;left:0px;top:0px;width:100%;height:800px;
}

#z1 {
  position:absolute;z-Index:0;left:0px;top:0px;
}

#buttons {
  position:absolute;z-Index:101;left:40%;bottom:20px;width:275px;
}

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

<body>
 <div class="parent" >
  <img id="z1" src="http://thelivingmoon.com/undomiel/interface/earth/hangar.jpg" />
 </div>
 <div id="buttons" >
 <img src="http://thelivingmoon.com/undomiel/interface/earth/down2.png" style="position:relative;z-Index:101;" onmouseover="zxcZoomImage.Zoom('z1',true);" onmouseout="zxcZoomImage.Zoom('z1');" />
 <img src="http://thelivingmoon.com/undomiel/interface/earth/up2.png" style="position:relative;z-Index:101;" onmouseover="zxcZoomImage.Zoom('z1',false);" onmouseout="zxcZoomImage.Zoom('z1');" />
</div>



<script type="text/javascript">
/*<![CDATA[*/
// Zoom Image (07-May-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/StdImages/
var zxcZoomImage={

 Zoom:function(id,ud){
  var o=this['zxc'+id];
  if (o){
   var t=o.a[0][ud===true?3:ud===false?2:4],ms=o.ms*Math.abs((t-o.a[0][4])/(o.a[0][3]-o.a[0][2]))+10;
   this.animate(o,o.a[0],o.a[0][4],t,new Date(),ms);
   this.animate(o,o.a[1],o.a[1][4],o.a[1][ud===true?3:ud===false?2:4],new Date(),ms);
   this.animate(o,o.a[2],o.a[2][4],o.a[2][ud===true?3:ud===false?2:4],new Date(),ms);
   this.animate(o,o.a[3],o.a[3][4],o.a[3][ud===true?3:ud===false?2:4],new Date(),ms);
   ud===true||ud===false?o.ud=ud:null;
  }
 },

 init:function(o){
  var id=o.ImageID,z=o.Zoom,ms=o.Animate,i=document.getElementById(id),p=i?i.parentNode:null;
  if (p){
   o.id=id;
   o.i=i;
   o.p=p;
   o.z=typeof(z)=='number'&&z>1?z:2;
   o.ms=typeof(ms)=='number'&&ms>100?ms:1000;
   o.ni=new Image();
   o.ni.src=i.src;
   o.ud=false;
   this.load(o);
  }
 },

 Resize:function(id){
  var o=this['zxc'+id];
  if (o){
   var iw=o.ni.width,ih=o.ni.height,w=o.p.offsetWidth,h=w*ih/iw,cx=typeof(o.CenterX)=='number'?o.CenterX:w/2,cy=typeof(o.CenterY)=='number'?o.CenterY:h/2,cx=w*cx/iw,cy=h*cy/ih;
   o.a[0][2]=w;
   o.a[0][3]=w*o.z;
   o.a[1][2]=h;
   o.a[1][3]=h*o.z;
   o.a[2][3]=-cx*o.z+o.p.offsetWidth/2;
   o.a[3][3]=-cy*o.z+o.p.offsetHeight/2;
   this.Zoom(o.id,o.ud);
  }
 },

 load:function(o){
  var oop=this,iw=o.ni.width,ih=o.ni.height,w=o.p.offsetWidth,h=w*ih/iw;
  clearTimeout(o.to);
  if (iw<40){
   return o.to=setTimeout(function(){ oop.load(o); },100);
  }
  o.i.style.left=0+'px';
  o.i.style.width=w+'px';
  o.i.style.height=h+'px';
  o.a=[[o.i,'width',w,w*o.z,w],[o.i,'height',h,h*o.z,h],[o.i,'left',o.i.offsetLeft,0,o.i.offsetLeft],[o.i,'top',o.i.offsetTop,0,o.i.offsetTop]];
  this['zxc'+o.id]=o;
  this.Resize(o.id);
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[5]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[4]=Math.max(f<0||t<0?n:0,n);
   a[0].style[a[1]]=a[4]+'px';
  }
  if (ms<mS){
   a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[4]=t;
   a[0].style[a[1]]=t+'px';
  }
 }


}

zxcZoomImage.init({
 ImageID:'z1',
 Zoom:2,
 Animate:5000,
 CenterX:500,
 CenterY:670
});

window.onresize=function(){
 var p=document.getElementById('z1'),b=document.getElementById('buttons');
 b.style.left(document.getElementById('z1').offsetWidth-b.offsetWidth)/2+'px';
 zxcZoomImage.Resize('z1');
}
/*]]>*/
</script>

</body>

</html>

**jundo12** · 05-08-2014, 04:41 PM

thanks

here's another question. i have two frames of animation from an animated gif. i'd like each time i click a button, for one frame of the animation to play. so like frame1, frame2, frame1, frame2 etc = click click click click etc
is that possible?

**vwphillips** · 05-09-2014, 08:36 AM

this should be a new post but

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>
</head>

<body>
<input type="button" name="" value="Rotate" onclick="Rotate('i1',['http://www.vicsjavascripts.org/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org/StdImages/Egypt7.jpg']);" />
<img id="i1" src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" />
<script type="text/javascript">
/*<![CDATA[*/

function Rotate(id,a){
 var i=document.getElementById(id),o=Rotate[id],z0=0,n;
 if (i&&!o&&a instanceof Array){
  for (;z0<a.length;z0++){
   n=new Image();
   n.src=a[z0];
   a[z0]=n;
  }
  o=Rotate[id]={
   a:a,
   n:0
  }
 }
 if (o){
  o.n=++o.n%o.a.length;
  i.src=o.a[o.n].src;
 }
}

/*]]>*/
</script>

</body>

</html>