Help with Resizing Magnification box

**tracey.gau** · 06-02-2011 04:28 PM

Hi everyone! Please go easy on me, I'm not a coder but do have a little experience with html. Im not able to reach my programmer so if you can help Id really appreciate it! The script below magnifies a small portion of a larger image in a separate box. Is there any way I can add to the code to alter the area and level of magnification shown from the original image onto the new box? Thanks in advance for any help/suggestions!

Code:

<script type="text/javascript">
	function DoMagnify(sender, e)
	{
		var posx = 0;
		var posy = 0;
		if (!e) var e = window.event;
		
		if (e.pageX || e.pageY)	{
			posx = e.pageX;
			posy = e.pageY;
		} else if (e.clientX || e.clientY) {
			posx = e.clientX + document.body.scrollLeft;
			posy = e.clientY + document.body.scrollTop;
		}
		
		posx = posx - sender.offsetParent.offsetLeft - sender.offsetLeft - 0;
		posy = posy - sender.offsetParent.offsetTop - sender.offsetTop - 0;
		
		document.Form1.ImageMagnify.src = 'MagnifyRender.ashx?X=' + posx +  '&Y=' + posy + '&O=26496745&R=10004&F=0317&A=71994&rand=' + Math.random();
	}
	
	var NS = (navigator.appName=="Netscape")?true:false; 

	function FitPic() { 
		iWidth = (NS)? window.innerWidth : document.body.clientWidth; 
		iHeight = (NS)? window.innerHeight : document.body.clientHeight; 
		iWidth = document.images[100].width - iWidth; 
		iHeight = document.images[100].height - iHeight; 
		window.resizeBy(iWidth+100, iHeight+100); 
		self.focus(); 
	}; 
	
</script>


<div id="LargeImage"><img id="imgLarge" GalleryImg=false class="LargeImage" onclick="DoMagnify(this, event);" src="_" width=480 height=630></div>
<div id="Col2" style="float: right;">
	<div id="Magnify"><img width=400 height=400 GalleryImg=true id="ImageMagnify" ></div>

**vwphillips** · 06-03-2011 05:56 AM

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[*/
#main {
  position:absolute;left:10px;top:50px;width:500px;height:250px;border:solid red 1px;
}

#magnify {
  position:absolute;overflow:hidden;left:550px;top:120px;width:200px;height:200px;border:solid red 1px;
}

#magnify IMG{
  position:absolute;left:0px;top:0px;width:1000px;height:500px;
}

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

<body>
 <img id="main" src="http://www.vicsjavascripts.org.uk/StdImages/World2.jpg" />

 <div id="magnify" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/World2.jpg" />
 </div>
http://www.webdeveloper.com/forum/showthread.php?t=247160
<script type="text/javascript">
/*<![CDATA[*/

function zxcMagnify(o){
 var main=document.getElementById(o.MainID),mag=document.getElementById(o.MagnifyID),img=mag.getElementsByTagName('IMG')[0],magw=mag.offsetWidth,magh=mag.offsetHeight,imgw=img.width,imgh=img.height;
 img.style.left=(magw-imgw)/2+'px';
 img.style.top=(magh-imgh)/2+'px';
 this.ratio=imgw/main.offsetWidth;
 this.magwh=[magw/2,magh/2];
 this.max=[-imgw+magw,-imgh+magh];
 this.main=main;
 this.img=img;
 this.addevt(main,'mouseup','magnify');
}

zxcMagnify.prototype={

 magnify:function(e){
  var mse=this.mse(e),pos=this.pos(this.main),img=this.img,r=this.ratio,magwh=this.magwh,max=this.max;
  img.style.left=Math.min(Math.max(-(mse[0]-pos[0])*r+magwh[0],max[0]),0)+'px';
  img.style.top=Math.min(Math.max(-(mse[1]-pos[1])*r+magwh[1],max[1]),0)+'px';
 },

 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); });
 }

}

new zxcMagnify({
 MainID:'main',
 MagnifyID:'magnify'
});
/*]]>*/
</script>
</body>

</html>

Thread: Help with Resizing Magnification box

Thread Tools

Display

Help with Resizing Magnification box

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions