Images on webpages - Zoom In function for users

  [DELETED] 18:37 27 Jun 2006

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.

  [DELETED] 18:41 27 Jun 2006

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.

  [DELETED] 18:47 27 Jun 2006

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

  [DELETED] 18:52 27 Jun 2006

Found some Javascript code for my webpage :

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

  [DELETED] 18:53 27 Jun 2006

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 ({var} 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]'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);[idm].style.left))*xx ;[idm]*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] =parseInt(Magnifico[idm] +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] } 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] } setMagtile(idm); } function hideMagnifier(idm){ Magnifico[idm].style.visibility="hidden"; magnify=false; }
// -->

  [DELETED] 18:54 27 Jun 2006

And the third and final bit :

<a href="javascript:initMagnifier()" class="magnify_this">
<img src="lonnenharrismarriage.jpg"
width="800" height="600" border="0"></a>

  [DELETED] 18:57 27 Jun 2006

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).

  [DELETED] 18:58 27 Jun 2006

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

  [DELETED] 19:53 27 Jun 2006

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.

  [DELETED] 20:03 27 Jun 2006

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.

  [DELETED] 20:13 27 Jun 2006

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.

Elsewhere on IDG sites

Microsoft Surface Book 2 15in review

Illustrator Amy Grimes on how setting up her own eco-brand led to success with clients too

MacBook Pro keyboard issues and other problems

Test : l’enceinte connectée HomePod d’Apple