Image Magnify v1.1 - Magnify alternate Image

1) Script Title: Image Magnify v1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agemagnify.htm

3) Describe problem:

No Problem yet, just want to know if it is possible within this script to magnify a higher resolution image instead of scaling just the original down to a thumbnail.

The idea is to use a reduced sized (viz:reduced detail) image, map areas of that image and then call a "larger" version of just that area of the source image but I like the smooth zoom feature this script provides.

Example, The detailed image is nearly 1Meg, I can resize this with enough clarity to identify areas of interest in a 40k (480x320) image, then I just want to zoom into a specific area in say another 480x320 pic.

Rgds

Not sure if there is an easy way yet, but essentially you're looking to have the magnified image be a different one from the thumbnail?

this is relativly easy to do without using JQUERY by using image map calls.
I may not be able to do this to day but if interested say or better still post the requirement on the looking for a script forum.

better still a moderator could move the post.

Quote:

Originally Posted by ddadmin

Not sure if there is an easy way yet, but essentially you're looking to have the magnified image be a different one from the thumbnail?

That is correct.

Think of a pic of a motherboard, and then an image map to zoom in on say the processor to read the part number. that pic being a "high res" of the low res mapped area of the processor.

One of my suppliers has a handle catalogue where whoever did it just took pics of sample boards and the published them to a high res image but any dialup users, will not appreciate downloading a 300+kb page and there are 22 pages.

Believe it or not, I still try and optimize for 56k dialup users

To vwPhillps. lemme know if you need an image or two to work with.

Rgds

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> <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="WinterPalace" usemap="#PreviewImageMap1" ismap="ISMAP" /> <map name="PreviewImageMap1" id="map" > <area href="magnify:http://www.vicsjavascripts.org.uk/StdImages/One.gif" shape="rect" alt="" coords="6,138,73,199" /> <area href="magnify:http://www.vicsjavascripts.org.uk/StdImages/Two.gif" shape="rect" alt="" coords="131,185,205,247" /> <area href="magnify:http://www.vicsjavascripts.org.uk/StdImages/Three.gif" shape="rect" alt="" coords="85,80,173,129" /> <area href="magnify:http://www.vicsjavascripts.org.uk/StdImages/Four.gif" rel="magnify:http://www.vicsjavascripts.org.uk/StdImages/Four.gif" shape="circle" alt="" coords="235,158,15" /> <area href="magnify:http://www.vicsjavascripts.org.uk/StdImages/Five.gif" shape="poly" alt="" coords="220,147,220,147,203,145,178,158,160,180,185,187,216,190,220,147" /> </map> <script type="text/javascript"> // Animate (28-November-2009) // by Vic Phillips http://www.vicsjavascripts.org.uk // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time. // With the ability to scale the effect time on specified minimum/maximum values // and with three types of progression 'sin' and 'cos' and liner. // **** Application Notes // **** The HTML Code // // when moving an element the inline or class rule style position of the element should be assigned as // 'position:relative;' or 'position:absolute;' // // The element would normally be assigned a unique ID name. // // **** Initialising the Script. // // The script is initialised by assigning an instance of the script to a variable. // e.g A = new zxcAnimate('left','id1') // where: // A = a global variable (variable) // parameter 0 = the mode(see Note 1). (string) // parameter 1 = the unique ID name or element object. (string or element object) // parameter 1 = the initial value. (digits, default = 0) // **** Executing the Effect // // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);' // where: // A = the global referencing the script instance. (variable) // parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100) // parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100) // parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds) // parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3) // field 0 the minimum value. (digits) // field 1 the maximum value. (digits) // parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner') // 'sin' progression starts fast and ends slow. // 'cos' progression starts slow and ends fast. // // Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity. // Note 2: The default units(excepting opacity) are 'px'. // For hyphenated modes, the first character after the hyphen must be upper case, all others lower case. // Note 3: The scale is of particular use when re-calling the effect // in mid progression to retain an constant rate of progression. // Note 4: The current effect value is recorded in A.data[0]. // Note 5: A function may be called on completion of the effect by assigning the function // to the animator intance property .Complete. // e.g. [instance].Complete=function(){ alert(this.data[0]); }; // // **** Functional Code(1.58K) - NO NEED to Change function zxcAnimate(mde,obj,srt){ this.to=null; this.obj=typeof(obj)=='object'?obj:document.getElementById(obj); this.mde=mde.replace(/\W/g,''); this.data=[srt||0]; return this; } zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){ clearTimeout(this.to); this.time=ms||this.time||0; this.data=[srt,srt,fin]; this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0]))); this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:''; this.inc=Math.PI/(2*this.mS); this.srttime=new Date().getTime(); this.cng(); } zxcAnimate.prototype.cng=function(){ var oop=this,ms=new Date().getTime()-this.srttime; this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]; this.apply(); if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10); else { this.data[0]=this.data[2]; this.apply(); if (this.Complete) this.Complete(this); } } zxcAnimate.prototype.apply=function(){ if (isFinite(this.data[0])){ if ((this.mde!='left'&&this.mde!='top')&&this.data[0]<0) this.data[0]=0; if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px'; else zxcOpacity(this.obj,this.data[0]); } } function zxcOpacity(obj,opc){ if (opc<0||opc>100) return; obj.style.filter='alpha(opacity='+opc+')'; obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001; } </script> <script type="text/javascript"> /*<![CDATA[*/ function zxcMagnify(o){ var map=document.getElementById(o.id); var areas=map.getElementsByTagName('AREA'); this.pops=[]; for (var z0=0;z0<areas.length;z0++){ if (areas[z0].href&&areas[z0].href.indexOf('magnify:')==0){ this.pops[z0]=[areas[z0].href.replace('magnify:','')]; this.addevt(areas[z0],'click','Expand',z0); areas[z0].href='#'; } } var img=document.createElement('IMG'); img.style.position='absolute'; img.style.zIndex='101'; img.style.width='0px'; img.style.height='0px'; this.lft=new zxcAnimate('left',img); this.top=new zxcAnimate('top',img); this.wid=new zxcAnimate('width',img); this.hei=new zxcAnimate('height',img); document.body.appendChild(img); this.addevt(document,'click','Hide'); this.img=img; this.ms=typeof(o.duration)=='number'?o.duration:1000; if (o.loading){ this.loading=new Image(); this.loading.src=o.loading; } } zxcMagnify.prototype.Hide=function(p,e){ var obj=window.event?e.srcElement:e.target; while (obj.parentNode){ if (obj.nodeName.toUpperCase()=='AREA'){ return; } obj=obj.parentNode; } this.img.style.width='0px'; this.img.style.height='0px'; this.img.src='#'; } zxcMagnify.prototype.Expand=function(nu,e){ clearTimeout(this.to); var pop=this.pops[nu],oop=this; if (e){ this.mse=zxcMse(e); } if (!pop[1]){ this.animate(this.loading,10); pop[1]=new Image(); pop[1].src=pop[0]; } if (pop[1].complete){ if (this.img.src!=pop[1].src){ this.animate(pop[1]); } } else { this.to=setTimeout(function(){ oop.Expand(nu); },500); } return false; } zxcMagnify.prototype.animate=function(obj,ms){ var wwhs=zxcWWHS(); this.img.src=obj.src; this.lft.animate(this.mse[0],wwhs[2]+(wwhs[0]-obj.width)/2,ms||this.ms); this.top.animate(this.mse[1],wwhs[3]+(wwhs[1]-obj.height)/2,ms||this.ms); this.wid.animate(0,obj.width,ms||this.ms); this.hei.animate(0,obj.height,ms||this.ms); } zxcMagnify.prototype.addevt=function(o,t,f,p){ var oop=this; if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false); else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); }); else { var prev=o['on'+t]; if (prev) o['on'+t]=function(e){ prev(e); oop[f](p,e); }; else o['on'+t]=o[f]; } } function zxcMse(ev){ if(!ev) var ev=window.event; if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]]; return [ev.pageX,ev.pageY]; } function zxcDocS(){ if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop]; return [document.body.scrollLeft,document.body.scrollTop]; } function zxcWWHS(){ if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset]; else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop]; return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop]; } new zxcMagnify({ id:'map', duration:1000, loading:'http://www.vicsjavascripts.org.uk/StdImages/loading.gif' }); /*]]>*/ </script> </body> </html>

Vic

You are making assumptions that I know what to do with the script, I do appreciate the effort, but I tried pasting it into a new page and testing it and all I get is Winter Palace text in a block, then nothing.

Do you have a link? I want to see if this will work for me before I go to the effort of image mapping and trying to place your stuff in mine.

Thanks

http://www.vicsjavascripts.org.uk/Animate/0912114A.htm

Vic for some reason, your links do not work, I keep getting a link broken error.

Here is a pic of a low res with the supposed mapped area shown in a dotted box and here is the "high-res" image of that mapped area.

The low res pic still needs to come down in size so the example is still pretty detailed enough but there are over 40 such pages and with each at 20-30k it adds up. Allowing a quick album of low res and pre-load images and then just viewing those parts of interest in more detail will be IMO more user friendly. I intend to use something like page curl as an album and then use the zoom to alternate image as the option.

FWIW I also found this cool magnifier script that uses a virtual magnifying glass called loupe.js

http://www.netzgesta.de/loupe/logo.jpg

my provider blocks certain counties due to hacking all I can do is post the latest version of the code

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> <div style="height:400px;"></div> <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="WinterPalace" usemap="#PreviewImageMap1" ismap="ISMAP" /> <map name="PreviewImageMap1" id="map" > <area href="http://www.vicsjavascripts.org.uk/StdImages/One.gif?magnify" shape="rect" alt="" coords="6,138,73,199" /> <area href="http://www.vicsjavascripts.org.uk/StdImages/Two.gif?magnify" shape="rect" alt="" coords="131,185,205,247" /> <area href="http://www.vicsjavascripts.org.uk/StdImages/Three.gif?magnify" shape="rect" alt="" coords="85,80,173,129" /> <area href="http://www.vicsjavascripts.org.uk/StdImages/Four.gif?magnify" shape="circle" alt="" coords="235,158,15" /> <area href="magnify:http://www.vicsjavascripts.org.uk/StdImages/Five.gif?magnify" shape="poly" alt="" coords="220,147,220,147,203,145,178,158,160,180,185,187,216,190,220,147" /> </map> <div style="height:400px;"></div> <script type="text/javascript"> // Animate (28-November-2009) // by Vic Phillips http://www.vicsjavascripts.org.uk // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time. // With the ability to scale the effect time on specified minimum/maximum values // and with three types of progression 'sin' and 'cos' and liner. // **** Application Notes // **** The HTML Code // // when moving an element the inline or class rule style position of the element should be assigned as // 'position:relative;' or 'position:absolute;' // // The element would normally be assigned a unique ID name. // // **** Initialising the Script. // // The script is initialised by assigning an instance of the script to a variable. // e.g A = new zxcAnimate('left','id1') // where: // A = a global variable (variable) // parameter 0 = the mode(see Note 1). (string) // parameter 1 = the unique ID name or element object. (string or element object) // parameter 1 = the initial value. (digits, default = 0) // **** Executing the Effect // // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);' // where: // A = the global referencing the script instance. (variable) // parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100) // parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100) // parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds) // parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3) // field 0 the minimum value. (digits) // field 1 the maximum value. (digits) // parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner') // 'sin' progression starts fast and ends slow. // 'cos' progression starts slow and ends fast. // // Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity. // Note 2: The default units(excepting opacity) are 'px'. // For hyphenated modes, the first character after the hyphen must be upper case, all others lower case. // Note 3: The scale is of particular use when re-calling the effect // in mid progression to retain an constant rate of progression. // Note 4: The current effect value is recorded in A.data[0]. // Note 5: A function may be called on completion of the effect by assigning the function // to the animator intance property .Complete. // e.g. [instance].Complete=function(){ alert(this.data[0]); }; // // **** Functional Code(1.58K) - NO NEED to Change function zxcAnimate(mde,obj,srt){ this.to=null; this.obj=typeof(obj)=='object'?obj:document.getElementById(obj); this.mde=mde.replace(/\W/g,''); this.data=[srt||0]; return this; } zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){ clearTimeout(this.to); this.time=ms||this.time||0; this.data=[srt,srt,fin]; this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0]))); this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:''; this.inc=Math.PI/(2*this.mS); this.srttime=new Date().getTime(); this.cng(); } zxcAnimate.prototype.cng=function(){ var oop=this,ms=new Date().getTime()-this.srttime; this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]; this.apply(); if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10); else { this.data[0]=this.data[2]; this.apply(); if (this.Complete) this.Complete(this); } } zxcAnimate.prototype.apply=function(){ if (isFinite(this.data[0])){ if ((this.mde!='left'&&this.mde!='top')&&this.data[0]<0) this.data[0]=0; if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px'; else zxcOpacity(this.obj,this.data[0]); } } function zxcOpacity(obj,opc){ if (opc<0||opc>100) return; obj.style.filter='alpha(opacity='+opc+')'; obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001; } </script> <script type="text/javascript"> /*<![CDATA[*/ function zxcMagnify(o){ var map=document.getElementById(o.id); var areas=map.getElementsByTagName('AREA'); this.pops=[]; for (var z0=0;z0<areas.length;z0++){ if (areas[z0].href&&areas[z0].href.indexOf('?magnify')>-1){ this.pops[z0]=[areas[z0].href.replace('?magnify','')]; this.addevt(areas[z0],'click','Expand',z0); } } var img=document.createElement('IMG'); img.style.position='absolute'; img.style.zIndex='101'; img.style.width='0px'; img.style.height='0px'; this.lft=new zxcAnimate('left',img); this.top=new zxcAnimate('top',img); this.wid=new zxcAnimate('width',img); this.hei=new zxcAnimate('height',img); document.body.appendChild(img); this.addevt(document,'click','Hide'); this.img=img; this.ms=typeof(o.duration)=='number'?o.duration:1000; if (o.loading){ this.loading=new Image(); this.loading.src=o.loading; } } zxcMagnify.prototype.Hide=function(p,e){ var obj=window.event?e.srcElement:e.target; while (obj.parentNode){ if (obj.nodeName.toUpperCase()=='AREA'){ return; } obj=obj.parentNode; } this.img.style.width='0px'; this.img.style.height='0px'; this.img.src='#'; } zxcMagnify.prototype.Expand=function(nu,e){ clearTimeout(this.to); var pop=this.pops[nu],oop=this; if (e){ this.mse=zxcMse(e); if (e.preventDefault) e.preventDefault(); e.defaultValue=false; } if (!pop[1]){ this.animate(this.loading,10); pop[1]=new Image(); pop[1].src=pop[0]; } if (pop[1].complete){ if (this.img.src!=pop[1].src){ this.animate(pop[1]); } } else { this.to=setTimeout(function(){ oop.Expand(nu); },500); } return false; } zxcMagnify.prototype.animate=function(obj,ms){ var wwhs=zxcWWHS(); this.img.src=obj.src; this.lft.animate(this.mse[0],wwhs[2]+(wwhs[0]-obj.width)/2,ms||this.ms); this.top.animate(this.mse[1],wwhs[3]+(wwhs[1]-obj.height)/2,ms||this.ms); this.wid.animate(0,obj.width,ms||this.ms); this.hei.animate(0,obj.height,ms||this.ms); } zxcMagnify.prototype.addevt=function(o,t,f,p){ var oop=this; if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false); else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); }); else { var prev=o['on'+t]; if (prev) o['on'+t]=function(e){ prev(e); oop[f](p,e); }; else o['on'+t]=o[f]; } } function zxcMse(ev){ if(!ev) var ev=window.event; if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]]; return [ev.pageX,ev.pageY]; } function zxcDocS(){ if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop]; return [document.body.scrollLeft,document.body.scrollTop]; } function zxcWWHS(){ if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset]; else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop]; return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop]; } new zxcMagnify({ id:'map', duration:1000, loading:'http://www.vicsjavascripts.org.uk/StdImages/loading.gif' }); /*]]>*/ </script> </body> </html>

Vic I tried to just view the http://www.vicsjavascripts.org.uk/St...nterPalace.jpg image by simply pasting it in the address bar and same error so I am not able to see what it is you have done even if I paste it into a blank page.

Can you not do a free domain site like jcheuer has which will not block SA IP's, pretty ironic seeing we are all part of the same "commonwealth" unless someone has a link to a proxy that will allow me to see your stuff,. Now if I was from Nigeria......:D

Rgds
Bernie