Adding prev and next buttons to fadeDiv.js
Hi,
I have been using this fadeDiv.js script which I guess from my searching of this forum is one of Vic Phillips' scripts. It works really well and I have managed to add a small accomanying script to manage thumbnails (I am not a coder), but I am totally stumped trying to add "prev" and "next" buttons that work for this. If anyone (or Vic) can shed any light as to how to do this I would be most grateful.
Code:function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){ if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); } if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return; var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']; if (zxcoop){ clearTimeout(zxcoop.to); if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime); else zxcoop.update([zxcsrt,zxcfin],zxctime); } else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime); } function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){ this.srtfin=[zxcsrt,zxcfin]; this.to=null; this.obj=zxcobj; this.mde=zxcmde.replace(/[-#]/g,''); this.update([zxcsrt,zxcfin],zxctime); } zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){ this.time=zxctime||this.time||2000; this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]]; this.srttime=new Date().getTime(); this.cng(); } zxcBAnimatorOOP.prototype.cng=function(){ var zxcms=new Date().getTime()-this.srttime; this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1]; if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0; if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px'; else zxcOpacity(this.obj,this.data[0]); if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),10); else { this.data[0]=this.data[2]; if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px'; else zxcOpacity(this.obj,this.data[0]); } } function zxcOpacity(zxcobj,zxcopc){ if (zxcopc<0||zxcopc>100) return; zxcobj.style.filter='alpha(opacity='+zxcopc+')'; zxcobj.style.opacity=zxcobj.style.MozOpacity=zxcobj.style.KhtmlOpacity=zxcopc/100-.001; } function zxcFadeSS(zxcid,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud){ var zxcp=document.getElementById(zxcid); var zxcoop=zxcp.oop; if (!zxcp.oop){ zxcoop=zxcp.oop=new zxcFadeSSOOP(zxcp,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud); if (typeof(zxcsrt)=='number') zxcoop.srtto=setTimeout(function(){zxcoop.cng(); },zxcsrt); } else { clearTimeout(zxcoop.to); clearTimeout(zxcoop.srtto); zxcoop.ud=zxcud||zxcoop.ud; zxcoop.spd=zxcspd||zxcoop.spd; zxcoop.hold=zxchold||zxcoop.hold; if (typeof(zxcimgnu)=='number'){ if (typeof(zxcsrt)=='number') zxcoop.srtto=setTimeout(function(){zxcoop.cng(); },zxcsrt); else zxcoop.cng(zxcimgnu+1); } else if (zxcimgnu) zxcoop.cng(); } } function zxcFadeSSOOP(zxcp,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud){ this.p=zxcp; this.ary=[]; var zxcclds=zxcp.childNodes; for (var zxccnt=0,zxc0=0;zxc0<zxcclds.length;zxc0++){ if (zxcclds[zxc0].nodeType==1){ this.ary[zxccnt]=zxcclds[zxc0]; zxcclds[zxc0].style.zIndex='0'; zxcOpacity(zxcclds[zxc0],0); zxccnt++; } } this.ary=this.ary.reverse(); this.cnt=zxcimgnu||0; this.lst=this.ary[this.cnt]; this.lst.style.zIndex='1'; zxcOpacity(this.lst,100); this.ud=zxcud||1; this.to=null; this.srtto=null; this.spd=zxcspd||1000; this.hold=zxchold||2000; } zxcFadeSSOOP.prototype.cng=function(zxcnu){ this.lst.style.zIndex=0; var zxcoop=this.lst.opacityoop; zxcBAnimator('opacity',this.lst,zxcoop?zxcoop.data[0]:100,0,this.spd); if (typeof(zxcnu)!='number') this.cnt+=this.ud; else this.cnt=zxcnu-1; this.cnt=this.cnt<0?this.ary.length-1:this.cnt==this.ary.length?0:this.cnt; this.lst=this.ary[this.cnt]; this.lst.style.zIndex=1; zxcoop=this.lst.opacityoop; zxcBAnimator('opacity',this.lst,(zxcoop?zxcoop.data[0]:0)+1,100,this.spd); if (!zxcnu) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),this.hold); }
Many thanks - Zaphodz
CSS Codes
Reply With Quote
Bookmarks