<!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>