<!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[*/
.panel {
position:relative;width:900px;height:610px;border:solid red 1px;
}
.panel IMG {
float:left;margin-Left:5px;margin-Top:5px;
}
/*]]>*/
</style>
</head>
<body>
<div id="panel1" class="panel" >
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo1.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo2.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo3.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo4.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo5.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo6.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo7.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo8.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo9.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo10.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo11.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo12.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo13.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo14.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo15.jpg" />
<img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo16.jpg" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Fade Image Panel. (126-June-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcFadeImagePanel={
init:function(o){
var p=document.getElementById(o.ID),clds=p.getElementsByTagName('IMG'),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.HoldDurationimgs=[],s=o.SequenceDuration,imgs=[],srcs=[],obj,z0=0;
for (;z0<clds.length;z0++){
imgs[z0]=clds[z0];
srcs[z0]=clds[z0].src;
}
obj={
imgs:imgs,
srcs:srcs,
lgth:imgs.length-1,
ms:ms,
hold:typeof(hold)=='number'?hold:ms*2,
sms:typeof(s)=='number'?s:ms/2
}
this.rotate(obj,o.hold);
},
rotate:function(o,ms){
var oop=this;
o.to=setTimeout(function(){
o.imgs=oop.shuffle(o.imgs);
o.cnt=0;
oop.sequence(o);
},ms||o.hold);
},
sequence:function(o){
if (o.imgs[o.cnt]){
var oop=this;
oop.animate(o,o.imgs[o.cnt],100,0,new Date(),o.ms,'dly'+o.cnt,o.cnt);
o.cnt++
setTimeout(function(){ oop.sequence(o); },o.sms);
}
},
animate:function(o,obj,f,t,srt,mS,to,cnt){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f,p;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
o[to]=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS,to,cnt); },10);
}
else {
if (t==0){
obj.src=o.srcs[cnt];
oop.animate(o,obj,0,100,new Date(),o.ms,'dly'+cnt,cnt);
}
else if (cnt==o.lgth){
oop.rotate(o,o.hold);
}
}
},
shuffle:function(ary){
for (var r,t,z0=0;z0<ary.length;z0++){
r=Math.floor(Math.random()*ary.length);
t=ary[z0];
ary[z0]=ary[r];
ary[r]=t;
}
return ary;
}
}
zxcFadeImagePanel.init({
ID:'panel1', // the unique ID name of the parent DIV. (string)
FadeDuration:1000, //(optional) the fade duration in milli seconds. (number, default = 1000)
HoldDutation:4000, //(optional) the 'hold' duration in milli seconds. (number, default = FadeDuration*2)
SequenceDuration:500 //(optional) the 'sequence' duration in milli seconds. (number, default = FadeDuration/2)
});
/*]]>*/
</script>
</body>
</html>
