Images on webpages - Zoom In function for users

  CLONNEN 18:37 27 Jun 06
Locked

Does anyone know if there is a way to allow users to Zoom In / Out on a webpage. I want them to be able to view close-up detail of jpg images.

Preferably something which will work in any browser.

If anyone can point me towards some HTML code which will do this I would be grateful.

  webdesignkid 18:41 27 Jun 06

This might not be for you, but zoom in yourself and then let your viewrs change from a list so they choose the zoom they want.

  CLONNEN 18:47 27 Jun 06

What would be the actual HTML code for such a thing?

  CLONNEN 18:52 27 Jun 06

Found some Javascript code for my webpage :

<HTML>
<HEAD>
<script language="javascript1.2">
<!--
var magnification=3 ; //-- magnification ratio is 3X enlargement
var magviewersize=.5 ; //-- magnification viewer is 50% of the image width
</script>
<div style="font-size:1px; display:none;">zipzoom</div>

  CLONNEN 18:53 27 Jun 06

Here's the next part of the code :

<script language="javascript1.2">
<!--
var quot="'"; var Magnifico=new Array(); var magnify=false; var magStartX=0; var magStartY=0; function initMagnifier(){ for (im=0; im<document.images.length; im++){ var magthis=false; if(document.images[im].parentNode.className.indexOf("magnify_this")>=0){magthis=true}; if(document.images[im].parentNode.href) { if (document.images[im].parentNode.href.indexOf("initMagnifier")>=0){magthis=true} } if( document.images[im].id.indexOf("Magnifier")>=0 || document.images[im].id.indexOf("Magtile")>=0 ){magthis=false}; if(magthis==true){ nextImage=document.images[im]; var thisImageCode=nextImage.parentNode.innerHTML.substr(0,nextImage.parentNode.innerHTML.indexOf(">"))+ ' id="bgbaseimg'+im+'" galleryimg="false" oncontextmenu="return false;" '+ ' onmouseover ="setMagnifier('+im+');" '+ ' onmouseout ="hideMagnifier('+im+'); return false" >'; if (nextImage.style.cssFloat){var alignment=nextImage.style.cssFloat} else if (nextImage.align) {var alignment=nextImage.align} else {var alignment='none'} nextImage.parentNode.innerHTML= '<div id="placeholder'+im+'" style="position:relative; left:0px; top:0px; float:'+alignment+';'+ ' width:'+nextImage.offsetWidth+'; height:'+nextImage.offsetHeight+';"'+ ' onclick="return false">'+ '<div id="imgholder'+im+'" style="position:absolute; left:0px; top:0px; border:0px solid blue; overflow:hidden">'+ thisImageCode+ '<div id=Magnifier'+im+' style="position:absolute; left:0px; top:0px; '+ ' width:'+(nextImage.offsetWidth*magviewersize)+'px; height:'+(nextImage.offsetHeight*magviewersize)+'px; '+ ' border:1px solid gray; visibility:hidden; overflow:hidden; '+ ' cursor:move; background-color:gray; " title="Move magnifier to see details"'+ ' ondrag="return false" '+ ' onmouseover ="setMagnifier('+im+'); " '+ ' onmousedown="showMagnifier('+im+',event.clientX,event.clientY); return false" '+ ' onmousemove="if (magnify==true) {moveMagnifier('+im+',event.clientX,event.clientY)}" '+ ' onmouseup ="magnify=false; return false" '+ '><img id="Magtile'+im+'" src="'+nextImage.src+'" style="position:absolute; '+ ' left:0px; top:0px; width:'+nextImage.offsetWidth*magnification+';" '+ ' onmouseover="this.galleryimg='+quot+'no'+quot+'" oncontextmenu="return false;">'+ '</div></div></div>'; Magnifico[im]=document.getElementById('Magnifier'+im); document.getElementById('bgbaseimg'+im).style.cssFloat='none'; Magnifico[im].style.left=(document.getElementById('imgholder'+im).offsetWidth/2)-(Magnifico[im].offsetWidth/2); Magnifico[im].style.top=(document.getElementById('imgholder'+im).offsetHeight/2)-(Magnifico[im].offsetHeight/2); setMagtile(im); } } } function setMagnifier(idm){ Magnifico[idm].style.visibility='visible'; } function setMagtile(idm){ MagImg=document.getElementById('Magtile'+idm); xx=(MagImg.offsetWidth-Magnifico[idm].offsetWidth)/ (document.getElementById('imgholder'+idm).offsetWidth-Magnifico[idm].offsetWidth); yy=(MagImg.offsetHeight-Magnifico[idm].offsetHeight)/(document.getElementById('imgholder'+idm).offsetHeight-Magnifico[idm].offsetHeight); MagImg.style.left=0-(parseInt(Magnifico[idm].style.left))*xx ; MagImg.style.top=0-(parseInt(Magnifico[idm].style.top))*yy ; } function showMagnifier(idm,X,Y){ magnify=true; magStartX=X; magStartY=Y; } function moveMagnifier(idm,X,Y){ Magnifico[idm].style.left=parseInt(Magnifico[idm].style.left)+X-magStartX; Magnifico[idm].style.top =parseInt(Magnifico[idm].style.top) +Y-magStartY; magStartX=X; magStartY=Y; if (Magnifico[idm].offsetLeft<=0 ){magStartX=magStartX-Magnifico[idm].offsetLeft; Magnifico[idm].style.left=0 } if (Magnifico[idm].offsetTop<=0 ) {magStartY=magStartY-Magnifico[idm].offsetTop; Magnifico[idm].style.top=0 } var rtlimit=document.getElementById('imgholder'+idm).offsetWidth-Magnifico[idm].offsetWidth; var btlimit=document.getElementById('imgholder'+idm).offsetHeight-Magnifico[idm].offsetHeight; if (Magnifico[idm].offsetLeft>=rtlimit ) {magStartX=magStartX-(Magnifico[idm].offsetLeft-rtlimit);Magnifico[idm].style.left=rtlimit } if (Magnifico[idm].offsetTop>=btlimit ) {magStartY=magStartY-(Magnifico[idm].offsetTop-btlimit);Magnifico[idm].style.top=btlimit } setMagtile(idm); } function hideMagnifier(idm){ Magnifico[idm].style.visibility="hidden"; magnify=false; }
// -->
</script>

  CLONNEN 18:54 27 Jun 06

And the third and final bit :

</HEAD>
<BODY LANG="en-US" DIR="LTR">
<a href="javascript:initMagnifier()" class="magnify_this">
<img src="lonnenharrismarriage.jpg"
width="800" height="600" border="0"></a>
<br>
</BODY>
</HTML>

  CLONNEN 18:57 27 Jun 06

It is not quite ideal - it only does one magnification level (users can't choose) - doesn't seem to have any way of turning off the magnifier window other than reloading the webpage.

Other snag is that users need to enable Javascript in their browser (especially with Internet Explorer - yellow security message at top of page).

  CLONNEN 18:58 27 Jun 06

Does anyone know of anything which does something similar with CGI or PHP (both of which my webspace supports).

  ade.h 19:53 27 Jun 06

It's not something that CGI or PHP are intended for, but I have seen websites that use Flash to achieve it, of course, and others that use javascript. In both cases, the steps were quite numerous and closely spaced. click here is a good example.

  old&nojob 20:03 27 Jun 06

Why not create say two more jpg's at different 'magnifications' and offer them via a list in a new window. Then its easy to go back to the main page. In fact I'm a newbie and would like to do this but suspect some javascript may improve things e.g. to open a window of just the right dimensions.

  ade.h 20:13 27 Jun 06

If you wanted to take that option, you could place the links to your other image versions in a drop-down menu (with or without a Go button). You could have the first image at 1x and the drop-down could list 2x, 3x and 4x or whatever you want.

This thread is now locked and can not be replied to.

Nintendo Switch review: Hands on with the intuitive modular console and its disappointing games…

1995-2015: How technology has changed the world in 20 years

Here's what should be coming to Adobe Project Felix in 2017

Apple AirPods review: Apple's beautiful new Bluetooth headphones bring true intelligence to…