latest version using clip and incorperating Johns suggestion.
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[*/ .mag { position:relative;width:200px;height:150px;left:400px;top:50px; } .pop { background-Color:#FFFFCC; } .pop1 { background-Color:#FFCC66;text-Align:left;border:solid black 1px; } .pop1 DIV{ text-Align:center; } #anchor { position:absolute;width:400px;height:300px;left:100px;top:250px;border:solid black 1px; } /*]]>*/ </style> <script src="http://www.vicsjavascripts.org.uk/AnimateII/AnimateII.js" type="text/javascript"></script> </head> <body> <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" rev=""> <img class="mag magnify:120% PopUpClassName:pop HTML:Egypt_1 AnimationSpeed:1000 padding:10px RemoveLink:true AnchorID:anchor PopUpImageWidth:300 PopUpImageHeight:225" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /> </a> <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg"> <img class="mag HTML:Egypt_2 src:http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" /> </a> <img class="mag HTML:Egypt_3 XOffset:205 YOffset:0" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" /> <div id="anchor" class="pop" ></div> <script type="text/javascript"> /*<![CDATA[*/ // Image Magnify (20-December-2010) DRAFT // by Vic Phillips http://www.vicsjavascripts.org.uk // Mouseover an image will display a magnifed image and optional text in a 'popup' DIV. // By default the 'PopUp' will be displayed over and centered on the image, // options allow the 'PopUp' to be displayed at specified offsets from the image // or centered on a target 'anchor. // Default options may be specified on initialisation and over ridden or compemented // by options specified in the image class name. // The images may be nested in a link A tag in which has the link href will be removed // on initialisation. // All 'PopUp's will be forced to be displayed within the browser window. // ****** Application Notes. // Removed to allow posting. // // ****** Functional Code(5.41K) - NO NEED to Change. function zxcImageMagnify(opts){ var imgs=this.bycls(opts.ImageClassName); this.oops=[]; for (var z0=0;z0<imgs.length;z0++){ this.oops[z0]=new zxcMagnify(imgs[z0],this.options(imgs[z0].className),opts,this); } } zxcImageMagnify.prototype={ closelst:function(oop){ for (var o,z0=0;z0<this.oops.length;z0++){ o=this.oops[z0]; if (o!=oop&&o.opac.data[0]>0){ o.animate(false); } } }, options:function(cls){ for (var cls=cls.split(' '),o={},index,nme,option,z0=0;z0<cls.length;z0++){ index=cls[z0].indexOf(':'); if (index>0){ o[cls[z0].substring(0,index).toLowerCase()]=cls[z0].substring(index+1); } } return o; }, bycls:function(nme){ for (var reg=new RegExp('\\b'+nme+'\\b'),els=document.getElementsByTagName('IMG'),ary=[],z0=0; z0<els.length;z0++){ if(reg.test(els[z0].className)) ary.push(els[z0]); } return ary; } } function zxcMagnify(img,o,opts,oop){ this.oop=oop; this.img=img; var mag=o.magnify&&isFinite(parseInt(o.magnify))?parseInt(o.magnify)/100:typeof(opts.Magnify)=='number'?opts.Magnify/100:1.2,padding=o.padding&&isFinite(parseInt(o.padding))?parseInt(o.padding):typeof(opts.Padding)=='number'?opts.Padding:0,magimg=new Image(),et=(o.executioneventtype?o.executioneventtype:typeof(opts.ExecutionEventType)=='string'?opts.ExecutionEventType:'').toLowerCase().replace('on',''),pop,div; this.zindex =(o.zindex&&isFinite(parseInt(o.zindex))?o.zindex:typeof(opts.zIndex)=='number'?opts.zIndex:100)*1 magimg.src=o.src||img.src; magimg.width=isFinite(parseInt(o.popupimagewidth))?parseInt(o.popupimagewidth):typeof(opts.PopUpImageWidth)=='number'?opts.PopUpImageWidth:img.width*mag; magimg.height=isFinite(parseInt(o.popupimageheight))?parseInt(o.popupimageheight):typeof(opts.PopUpImageHeight)=='number'?opts.PopUpImageHeight:img.height*mag; magimg.style.position='relative'; magimg.style.left=padding+'px'; magimg.style.top=padding+'px'; pop=document.createElement('DIV'); pop.className=o.popupclassname||opts.PopUpClassName; document.body.appendChild(pop); pop.style.position='absolute'; pop.style.visibility='hidden'; pop.style.overflow='hidden'; pop.style.zIndex=this.zindex+''; pop.appendChild(magimg); this.popw=magimg.width+padding*2; pop.style.width=this.popw+'px'; if (o.html){ div=document.createElement('DIV') div.style.position='relative'; div.style.left=padding+'px'; div.style.top=padding+'px'; div.style.width=magimg.width+'px'; div.innerHTML=o.html.replace(/_/g,' '); pop.appendChild(div); } this.poph=magimg.height+div.offsetHeight+padding*2; pop.style.height=this.poph+'px'; this.pop=pop; this.clipsz=[[this.poph/2,this.popw/2,this.poph/2,this.popw/2],[0,this.popw,this.poph,0]]; this.clip=new zxcAnimateII('clip',pop,this.clipsz[0]); this.opac=new zxcAnimateII('opacity',pop,0); this.opac.Complete=function(){ if (this.data[0]==0){ this.obj.style.visibility='hidden'; } } this.anchor=document.getElementById(o.anchorid||opts.AnchorID); this.xos=o.xoffset&&isFinite(parseInt(o.xoffset))?parseInt(o.xoffset)+.1:false; this.yos=o.yoffset&&isFinite(parseInt(o.yoffset))?parseInt(o.yoffset)+.1:false; this.ms=o.animationspeed?o.animationspeed*1:typeof(opts.AnimationSpeed)=='number'?opts.AnimationSpeed:1000; this.to=null; this.addevt(this.img,et=='click'||et=='mousedown'||et=='mouseup'||et=='mouseout'?et:'mouseover','animate',true); this.addevt(pop,'mouseout','hide',true); this.addevt(pop,'mouseover','hide',false); if ((o.removelink||opts.RemoveLink)&&img.parentNode.nodeName.toUpperCase()=='A'){ img.parentNode.removeAttribute('href'); } } zxcMagnify.prototype={ animate:function(ud){ clearTimeout(this.to); var a=this.anchor,w=a?a.offsetWidth:this.img.width,h=a?a.offsetHeight:this.img.height,pos=this.pos(a?a:this.img),wwhs=this.wwhs(),lft=pos[0]+(this.xos?this.xos:(w-this.popw)/2),top=pos[1]+(this.yos?this.yos:(h-this.poph)/2); lft=lft+this.popw>wwhs[0]+wwhs[2]?wwhs[0]+wwhs[2]-this.popw:lft<wwhs[2]?+wwhs[2]+5:lft; top=top+this.poph>wwhs[1]+wwhs[3]?wwhs[1]+wwhs[3]-this.poph:top<wwhs[3]?5:top; this.pop.style.left=lft+'px'; this.pop.style.top=top+'px'; this.clip.animate(this.clip.data[0],this.clipsz[ud?1:0],this.ms); this.opac.animate(this.opac.data[0],ud?100:0,this.ms); this.pop.style.zIndex=this.zindex+(ud?1:0)+''; this.pop.style.visibility='visible'; if (ud){ this.oop.closelst(this); } }, hide:function(ud){ clearTimeout(this.to); if (ud&&this.opac.data[0]==100){ var oop=this; this.to=setTimeout(function(){ oop.animate(false); },100); } }, addevt:function(o,t,f,p){ var oop=this; if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false); else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); }); }, pos:function(obj){ var rtn=[0,0]; while(obj){ rtn[0]+=obj.offsetLeft; rtn[1]+=obj.offsetTop; obj=obj.offsetParent; } return rtn; }, wwhs:function(){ 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 zxcImageMagnify({ ImageClassName:'mag', // the common class name of images to magnify. (string) Padding:5, //(optional) the default padding to be applied to the popup. (digits, default = the image class padding or 0) PopUpClassName:'pop1', //(optional) the default popup class name. (string, default = the image class popup class name) Magnify:150, //(optional) the default image magnification as a percentage. (digits, default = the image class magnification or 120) AnimationSpeed:500, //(optional) the default animation speed. (digits, default = the image class animation speed or 1000) RemoveLink:true, //(optional) true = remove the HREF of all image parent node links. (boolean, default = false) // AnchorID:'anchor', //(optional) the popups are centered on an anchor element. (string, default = the popups are centered on the image) // PopUpImageWidth:100, //(optional) all popup image widths. (digits, default = the image class width or image magnification) // PopUpImageHeight:75, //(optional) all popup image heights. (digits, default = the image class height or image magnification) // ExecutionEventType:'click', //(optional) the event type to execute the 'PopUp' display. (string, default =the image class ExecutionEventType or mouseover') zIndex:100 //(optional) the default popup z-Index. (digits, default = the image class zindex or 100) }); /*]]>*/ </script> </body> </html>
CSS Codes
Reply With Quote
Bookmarks