Picture Magnifier
Version 2.03
written by Gerald Holdsworth

This is like a magnifying glass over an image. There are other magnifiers online, but those that I have seen are either commercial (i.e. you have to pay to use it), or just use two versions of the same image - one small (which is displayed on the page) and another which is a bigger version (which is used as the magnifier). This literally magnifies the image. Just click on the small magnifying glass in the top left to start. Click on it again to stop.

Click here for a demo

Javascript for 'Picture Magnifier':
//Just add the onload="addToolbox(this)" to any image you want the magnifier on.
//Also, add an id, as this is used for other components that are created.
//Other attributes:
//zoomfactor : how much to magnify the image by
//zoomsize   : how big the magnifier is in pixels
//
//For example:
//<img src="Picture.jpg" width="624" height="416" id="piccy" onload="addToolbox(this)" zoomfactor="2" zoomsize="200">
//
function moveDiv(event,ele)
{
 var divId=ele.id;
 if (divId.substr(0,9)!='magnifier') divId='magnifier_'+divId;
 var piccyId=divId.substr(10);
 var z=document.getElementById(piccyId).getAttribute('zoomhidden');
 var zoomfactor=document.getElementById(piccyId).getAttribute('zoomfactor');
 var zoomsize=document.getElementById(piccyId).getAttribute('zoomsize');
 if (z=='f')
 {
  var el=document.getElementById(divId);
  el.style.opacity='1';
  el.style.backgroundImage='url('+document.getElementById(piccyId).src+')';
  var picWidth=document.getElementById(piccyId).width;
  var picHeight=document.getElementById(piccyId).height;
  el.style.backgroundSize=(picWidth*zoomfactor)+'px '+(picHeight*zoomfactor)+'px';
  el.style.width=zoomsize+'px';
  el.style.height=zoomsize+'px';
  el.style.borderRadius=(zoomsize/2)+'px';
  el.style.border='ridge 5px';
  var x=mouseX(event);
  var y=mouseY(event);
  el.style.left=x-(zoomsize/2)+'px';
  el.style.top=y-(zoomsize/2)+'px';
  el.style.right=x+(zoomsize/2)+'px';
  el.style.bottom=y+(zoomsize/2)+'px';
  var picTop=getPosition(piccyId,0);
  var picLeft=getPosition(piccyId,1);
  var posX=(-((x*zoomfactor)-(picLeft*zoomfactor)))+(zoomsize/2);
  var posY=(-((y*zoomfactor)-(picTop*zoomfactor)))+(zoomsize/2);
  el.style.backgroundPosition=posX+'px '+posY+'px';
  if (x<picLeft || y<picTop
  || x>picLeft+picWidth || y>picTop+picHeight) el.style.visibility='hidden'; else el.style.visibility='visible';
 }
}
function addToolbox(el)
{
 el.setAttribute('zoomhidden','t');
// el.onmousemove=function(){moveDiv(event,this)};
 el.setAttribute('onmousemove','moveDiv(event,this)');
 var btn1=document.createElement('img');
 btn1.setAttribute('src','Magnify.gif');
 btn1.setAttribute('width','16px');
 btn1.setAttribute('height','16px');
 btn1.setAttribute('id','magbtn_'+el.id);
 btn1.style.position='absolute';
 btn1.className='button';
 btn1.name='Toolbox';
 btn1.title='Magnify';
 btn1.onclick=function(){DoZoom(el)};
 el.parentNode.appendChild(btn1);
 var mag1=document.createElement('div');
 mag1.style.cursor='none';
 mag1.style.backgroundRepeat='no-repeat';
 mag1.setAttribute('id','magnifier_'+el.id);
 mag1.style.position='absolute';
// mag1.onmousemove=function(){moveDiv(event,this)};
 mag1.setAttribute('onmousemove','moveDiv(event,this)');
 el.parentNode.appendChild(mag1);
 moveToolbox();
 el.setAttribute('onload','return false');
 window.onresize=moveToolbox;
}
function getPicID()
{
 var ele=document.getElementsByTagName('img');
 var picID=new Array();
 var i,id,t,lkimg;
 for (i=0;i<=ele.length-1;i++)
 {
  id=ele[i].getAttribute('id');
  if (id!=null) if (id.length>7)
  {
   t=id.substr(0,3);
   lkimg=id.substr(7);
   if (t=='mag') picID.push(id);
  }
 }
 return picID;
}
function moveToolbox()
{
 var pics=getPicID();
 var lt=0;
 var i,id,tp,lkimg;
 for (i=0;i<=pics.length-1;i++)
 {
  id=pics[i];
  tp=document.getElementById(id).height;
  lkimg=id.substr(7);
  document.getElementById(id).style.left=getPosition(lkimg,1)-lt+'px';
  document.getElementById(id).style.top=getPosition(lkimg,0)-tp+'px';
 }
}
function DoZoom(el)
{
 var z=el.getAttribute('zoomhidden');
 if (z=='f')
 {
  document.getElementById('magbtn_'+el.id).src='Magnify.gif';
  el.setAttribute('zoomhidden','t');
 }
 else
 {
  document.getElementById('magbtn_'+el.id).src='Magnify2.gif';
  el.setAttribute('zoomhidden','f');
 }
}
function mouseX(evt)
{
 var mx=0;
 if (evt.pageX) mx=evt.pageX;
 else if (evt.clientX) mx=evt.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
 return mx;
}
function mouseY(evt)
{
 var my=0;
 if (evt.pageY) my=evt.pageY;
 else if (evt.clientY) my=evt.clientY+(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
 return my;
}
function getPosition(id,x)
{
 var obj=document.getElementById(id);
 var topValue= 0,leftValue= 0;
 while(obj)
 {
  leftValue+= obj.offsetLeft;
  topValue+= obj.offsetTop;
  obj= obj.offsetParent;
 }
 if (x==0) finalvalue = topValue; else finalvalue=leftValue;
 return finalvalue;
}
Click here to download.

If you would like to email me, put gerald@ in front of the domain name, insead of www..
©2011-2020 Gerald Holdsworth IT Services