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[*/
.slideshow {
position:absolute;left:10px;top:10px;width:280px;height:210px;border:solid red 1px;background-Image:url(http://www.vicsjavascripts.org/StdImages/Cartoon1.gif);
}
.slideshow IMG{
width:280px;height:210px;border-Width:0px;
}
.slideshow .caption {
left:0px;width:100%;height:20px;background-Color:#FFFFCC;text-Align:center;font-Size:16px;
/* Moz */
opacity: .5;
/* IE5-7 */
filter: alpha(opacity=50);
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.paginate {
position:absolute;z-Index:4;left:300px;top:10px;width:20px;height:50px;
}
.paginate .default {
width:15px;height:15px;background-Color:#FFFFCC;float:left;margin-Top:22px;border:solid #FF3300 1px;font-Size:12px;text-Align:center;cursor:pointer;
}
.paginate .active {
background-Color:#FF0000;
}
.buttons {
position:absolute;left:0px;top:225px;width:325px;text-Align:center;
}
.buttons INPUT {
width:60px;background-Color:#FFCC66;font-Size:12px;
}
.buttons SELECT {
width:250px;font-Size:12px;background-Color:#FFCC66;margin-Top:5px;
}
/*]]>*/
</style>
</head>
<body>
<div id="ex1" class="slideshow" >
Loading Images
</div>
<div id="Page1" class="paginate"></div>
<div class="buttons" >
<input type="button" name="" value="Forward" onmouseup="zxcFadeSlideShow.Next('ex1',1);" />
<input id="b1" type="button" name="" value="Back" />
<br />
<input id="b4" type="button" name="" value="GoTo 0" />
<input id="b5" type="button" name="" value="GoTo 1" />
<input type="button" name="" value="GoTo 2" onmouseup="zxcFadeSlideShow.GoTo('ex1',2);" />
<br />
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Fade Slide Show (24-August-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/
var zxcFadeSlideShow={
Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
this.rotate(o,o.n+ud);
}
},
GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(id);
if (o.a[n]&&n!=o.n){
o.ud=n>o.n?1:-1;
this.rotate(o,n);
}
}
},
Auto:function(id,ms){
var oop=this,o=oop['zxc'+id];
if (o){
o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
}
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},
Init:function(o){
var id=o.SlideShowID,a=o.ImageArray,s=o.PreLoad,p=document.getElementById(id);
if (p&&a instanceof Array){
for (var src,z0=0;z0<a.length;z0++){
src=a[z0][0];
a[z0][0]=new Image();
a[z0][0].src=src;
}
o.id=id;
o.p=p;
this.load(o,a,new Date(),(typeof(s)=='number'&&s>0?s:10)*1000);
}
},
load:function(o,a,d,s){
clearTimeout(o.to);
for (var oop=this,z0=0,z1=0;z0<a.length;z0++){
if (a[z0][0].width<40&&new Date()-d<s){
return o.to=setTimeout(function(){ oop.load(o,a,d,s); },200);
}
}
for (;z1<a.length;z1++){
if (a[z1][0].width<40){
a.splice(z1--,1);
}
}
o.p.innerHTML='';
this.ready(o,a);
},
ready:function(o,d){
var ms=o.Animate,h=o.AutoHold,s=o.AutoStart,days=o.Persistence,pg=document.getElementById(o.PaginateID),add=o.AddEvents,add=typeof(add)=='object'&&add.constructor==Array?add:[],i,t,c=pg?pg.childNodes:[],days=(typeof(days)=='number'&&days>0)||days=='session'?days:-1,ck=this.cookie(o.id),ck=this.cookie(o.id),n=days!=-1&&ck&&d[ck]?ck*1:0,z0=0,z1=0,z2=0;
o.pg=[];
for (;z0<c.length;z0++){
if (c[z0].nodeType==1){
o.pg.push(c[z0]);
}
}
o.w=o.p.offsetWidth;
o.h=o.p.offsetHeight;
o.lk=document.createElement('A');
o.p.appendChild(o.lk);
o.a=[];
o.c=[];
for (;z1<d.length;z1++){
i=document.createElement('IMG');
o.lk.appendChild(i);
i.src=d[z1][0].src;
i.style.position='absolute';
i.style.zIndex=z1!=n?'0':'2';
i.style.visibility=z1!=n?'hidden':'visible';
i.style.left=(o.w-i.width)/2+'px';
i.style.top=(o.h-i.height)/2+'px';
d[z1][0]=i;
o.a[z1]=[i,'',z1,z1!=n?0:100];
c=o.pg[z1]?o.pg[z1]:document.createElement('DIV');
pg?pg.appendChild(c):null;
d[z1][2]?c.innerHTML=d[z1][2]:null;
c.className=c.className?c.className:'default';
o.pg[z1]=[c,c.className];
z1==n?c.className=o.pg[z0][1]+' active':null;
this.addevt(c,'click','GoTo',o.id,z1);
c=document.createElement('DIV');
c.className='caption';
c.style.position='absolute';
c.style.zIndex='4';
if (d[z1][3]){
c.innerHTML=d[z1][3];
o.p.appendChild(c);
}
o.c[z1]=[c,'top',c.offsetHeight,o.h-(z1!=n?0:c.offsetHeight)];
c.style.top=o.c[z1][3]+'px';
}
for (;z2<add.length;z2++){
i=document.getElementById(add[z2][0]),t=add[z2][1];
if (i&&t&&this[add[z2][2]]){
this.addevt(i,t=='mousemove'||t=='mousedown'||t=='mouseup'||t=='mouseover'||t=='mouseout'?t:'click',add[z2][2],o.id,add[z2][3]);
}
}
d[n][1]?o.lk.href=d[n][1]:null;
o.d=d;
o.n=n
o.days=days;
o.l=z1-1;
o.ud=1;
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.hld=typeof(h)=='number'&&h>20?h:o.ms*4;
o.cng=typeof(o.OnChange)=='function'?o.OnChange:null;
o.p.style.overflow='hidden';
o.cng?o.cng(o.n):null;
this['zxc'+o.id]=o;
typeof(s)=='number'&&s>20?this.Auto(o.id,s):null;
},
rotate:function(o,a){
this.Pause(o.id);
o.auto=a===true;
var n=o.auto?o.n+o.ud:a;
n=n<0?o.l:n>o.l?0:n;
o.lk.removeAttribute('href');
o.pg[o.n][0].className=o.pg[o.n][1];
a=o.a[o.n];
a[0].style.zIndex='1';
this.animate(o,a,a[3],0,new Date(),o.ms,n);
this.animate(o,o.c[o.n],o.c[o.n][3],o.h,new Date(),o.ms);
o.a[n][0].style.left=(o.w-o.a[n][0].width)/2+'px';
o.a[n][0].style.top=(o.h-o.a[n][0].height)/2+'px';
document.cookie=o.id+'='+n+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/;':';');
o.n=n;
o.cng?o.cng(o.n):null;
},
animate:function(o,a,f,t,srt,mS,x){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[3]=Math.max(0,n);
a[1]?a[0].style[a[1]]=a[3]+'px':oop.opc(a[0],a[3]);
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
}
else {
a[3]=t;
a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
if (t==0){
a[0].style.visibility='hidden';
a[0].style.zIndex='0';
}
if (x==o.n){
if (t==0){
o.d[x][1]?o.lk.href=o.d[x][1]:null;
a=o.a[o.n];
a[0].style.visibility='visible';
a[0].style.zIndex='2';
o.pg[x][0].className=o.pg[x][1]+' active';
this.animate(o,o.c[o.n],o.c[o.n][3],o.h-o.c[o.n][2],new Date(),o.ms);
this.animate(o,a,a[3],100,new Date(),o.ms,x);
}
else if (t==100&&o.auto){
oop.Auto(o.id,o.hld);
}
}
}
},
opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},
cookie:function(nme){
var re=new RegExp(nme+'=[^;]+','i');
return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
zxcFadeSlideShow.Init({
SlideShowID:'ex1', // the unique ID name of the slideshow parent DIV. (string)
ImageArray:[ // an array defining the image data. (array)
// field 0 = the image SRC
// field 1 = the image link HREF
// field 2 = the innerHTML of the pagination element
// field 3 = the innerHTML of slide in cpation element
['http://www.vicsjavascripts.org/StdImages/Egypt5.jpg','','1','Caption 1'],
['http://www.vicsjavascripts.org/StdImages/Egypt6.jpg','','2','Caption 2'],
['http://www.vicsjavascripts.org/StdImages/Egypt7.jpg','','3','Caption 3']
],
PreLoad:10, //(optional) the number of seconds allowed for image preload. (number, default = 10)
Animate:1000, //(optional) the effect duration in milli seconds. (number, default = 1000)
AutoHold:3000, //(optional) the auto rotate hold duration in milli seconds. (number, default = EffectDurarion*2)
AutoStart:3000, //(optional) true = start auto rotate on initilization. (boolean, default = true)
AddEvents:[ //(optional) an array of arrays defining the events to be added. (array, default = inline event calls)
// where each field is an array:
// field 0 = the unique ID name of the element. (string)
// field 1 = the event type. (string)
// field 2 = the function name. (string)
// field 3 = the parameter to pass to the function. (see Script Functions)
['ex1','mouseout','Auto'],
['ex1','mouseover','Pause'],
['b1','mouseup','Next',-1],
['b4','mouseup','GoTo',0],
['b5','mouseup','GoTo',1]
],
PaginateID:'Page1', // the unique ID name of the parent node containing the paginate DIV elements. (string)
Persistence:1, //(optional) the number of days to restore the last display. (number, default = -1 = no persistence)
//(optional) 'session' = restore the last display for the browser session. (number, default = -1 days = no persistence)
OnChange:function(n){ //(optional) the function to call when the images are rotated. (function, default = no function call)
// n = the index number of the current image.
}
})
/*]]>*/
</script>
</body>
</html>
Junior Coders
fade out possible?
), so I just changed their durations so that the long pause is on the blank and the short on the regular pause. If anyone wants to chime in on how to clean up that bit of code I'd be thrilled. Also it would be nice to know if it's possible to fine tune the fade out duration if one didn't want it to match the fade in. Like I said I tried putting numbers in for duration and they had no effect.
Posting Permissions
Reply With Quote
Bookmarks