latest version
<!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[*/
.KenBurns {
position:relative;left:200px;top:200px;width:200px;height:150px;border:solid red 1px;
}
.div {
position:absolute;z-Index:4;width:100px;height:75px;border:solid red 1px;
}
/*]]>*/
</style>
</head>
<body>
<!-- <div class="KenBurns">
<img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" width="200"/>
<div style="position:absolute;left:128px;top:82px;width:10px;height:10px;border:solid red 1px;" ></div>
</div>
-->
<input type="button" name="" value="GoTo 0" onmouseup="zxcKBSlideShow.GoTo('ss',0);" />
<input type="button" name="" value="GoTo 1" onmouseup="zxcKBSlideShow.GoTo('ss',1);" />
<input type="button" name="" value="GoTo 2" onmouseup="zxcKBSlideShow.GoTo('ss',2);" />
<div id="ss" class="KenBurns" onmouseover="zxcKBSlideShow.Pause('ss');" onmouseout="zxcKBSlideShow.Auto('ss');" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" width="200"/>
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=100 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
<script type="text/javascript">
/*<![CDATA[*/
// KB Slide Show (24-August-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcKBSlideShow={
init:function(o){
var id=o.SlideShowID,obj=document.getElementById(id),img=obj.getElementsByTagName('IMG')[0],w=obj.offsetWidth,h=obj.offsetHeight,ms=o.ZoomDuration,ms=typeof(ms)=='number'&&ms>0?ms:1000,hold=o.AutoHold,srt=o.AutoStart,z=typeof(z)=='number'&&z>=1?z:2,ary=o.ImageArray,ary=typeof(ary)=='object'&&ary.constructor==Array?ary:[],clone,lk=document.createElement('A'),nary=[],a,m,c,cnt=0,z0=0,z0a;
obj.style.overflow='hidden';
obj.appendChild(lk);
img.style.position='absolute';
img.style.zIndex='0';
img.style.left='0px';
img.style.top='0px';
img.style.width=w+'px';
img.style.height=h+'px';
img.style.borderWidth='0px';
clone=img.cloneNode(false);
clone.style.zIndex='2';
lk.appendChild(img);
lk.appendChild(clone);
for (;z0<ary.length;z0++){
if (typeof(ary[z0][0])=='string'){
nary[cnt]=[new Image(),[],[]];
nary[cnt][0].src=ary[z0][0];
a=typeof(ary[z0][1])=='object'&&ary[z0][1].constructor==Array?ary[z0][1]:[];
m=typeof(a[0])=='number'&&a[0]>=2?a[0]:2;
nary[cnt][1]=[['width',w,w,w*m,'w'+z0],['height',h,h,h*m,'h'+z0]];
c=ary[z0][2];
c=typeof(a[1])=='number'?a[1]>=2?Math.floor(a[1]):0:2;
if (c>0){
for (z0a=0;z0a<c*c;z0a++){
nary[cnt][2][z0a]=[['left',0,0,-w/m*(z0a%m)*m,'l'+z0a],['top',0,0,-h/m*Math.floor(z0a/m)*m,'t'+z0a]];
}
}
else {
nary[cnt][2][0]=[['left',0,0,(w-w*m)/2,'l'],['top',0,0,(h-h*m)/2,'t']];
}
nary[cnt][3]=a[2]!==false;
nary[cnt][4]=Math.min(nary[cnt][2].length,typeof(a[3])=='number'&&a[3]>0?a[3]:1000)-1;
nary[cnt][5]=ary[z0][2];
nary[cnt][6]=ary[z0][3];
cnt++;
}
}
o=this['zxc'+id]={
id:id,
ary:nary,
img:img,
iw:w,
ih:h,
lgth:nary.length-1,
clone:clone,
lk:lk,
fade:[null,0,o.Opacity!==false?0:100,100,'o'],
ms:ms,
auto:false,
hold:typeof(hold)=='number'&&hold>0?hold:ms*2,
ud:1,
cnt:-1
}
this.links(o,0);
if (typeof(srt)=='number'){
this.Auto(id,srt);
}
},
GoTo:function(id,nu){
var o=this['zxc'+id];
if (o&&o.ary[nu]&&nu!=o.cnt){
this.pan(id,nu);
}
},
Auto:function(id,ms){
var o=this['zxc'+id],oop=this,nu;
if (o){
o.dly=setTimeout(function(){ oop.pan(id,true); },ms||200);
}
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.dly);
clearTimeout(o.sdly);
o.auto=false;
}
},
pan:function(id,nu){
var o=this['zxc'+id],oop=this;
if (o){
this.Pause(id);
o.auto=nu===true;
if (o.auto){
nu=o.cnt+1;
nu=nu<0?o.lgth:nu>o.lgth?0:nu;
}
if (o.ary[nu][3]){
o.ary[nu][2]=this.shuffle(o.ary[nu][2]);
}
this.opac(o.clone,o.fade);
o.clone.src=o.ary[nu][0].src;
o.clone.style.left='0px';
o.clone.style.top='0px';
o.clone.style.width=o.iw+'px';
o.clone.style.height=o.ih+'px';
o.cnt=nu;
this.links(o,nu);
this.animate(o,o.fade,o.fade[2],100,new Date(),o.ms);
}
},
srt:function(o,nu){
o.scnt=0;
for (var a,z0=0;z0<2;z0++){
a=o.ary[o.cnt][1];
clearTimeout(o[a[z0][4]]);
this.animate(o,a[z0],a[z0][1],a[z0][3],new Date(),o.ms,z0);
if (z0<2){
a=o.ary[o.cnt][2][0];
clearTimeout(o[a[z0][4]]);
this.animate(o,a[z0],a[z0][1],a[z0][3],new Date(),o.ms,z0);
}
}
},
animate:function(o,ary,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
ary[1]=now;
if (ary[0]){
o.clone.style[ary[0]]=now+'px';
}
else {
this.opac(o.clone,now);
}
}
if (ms<mS){
o[ary[4]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
}
else {
ary[1]=ary[2];
if (ary[0]){
o.clone.style[ary[0]]=t+'px';
}
else {
this.opac(o.clone,100);
o.img.src=o.clone.src;
o.dly=setTimeout(function(){ oop.srt(o); },o.ms);
}
if (ary[0]=='left'){
if (o.scnt<o.ary[o.cnt][4]){
o.sdly=setTimeout(function(){ oop.sequence(o); },o.ms);
}
else {
if (o.auto){
oop.Auto(o.id,o.hold);
}
}
}
}
},
links:function(o,nu){
o.lk.removeAttribute('href');
if (o.ary[nu][5]){
o.lk.href=o.ary[nu][5];
}
o.lk.removeAttribute('title');
if (o.ary[nu][6]){
o.clone.title=o.ary[nu][6];
}
},
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;
},
sequence:function(o){
o.scnt++;
for (var a,z0=0;z0<2;z0++){
a=o.ary[o.cnt][2][o.scnt][z0];
clearTimeout(o[a[4]]);
this.animate(o,a,o.ary[o.cnt][2][o.scnt-1][z0][3],a[3],new Date(),o.ms);
}
},
opac:function(obj,now){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
}
zxcKBSlideShow.init({
SlideShowID:'ss', // the unique ID name of the parent DIV. (string)
ImageArray:[ // an array defining the slideshow images SRCs. (array)
// field 0 = the image src. (string)
// field 1 = an array defining the zoom in and pan data. (array)
// field 0 =(optional) the image zoom. (number, default = option 2)
// field 1 =(optional) the number of pan rows and colums. (number, default = 2, if <2 pan center once)
// field 2 =(optional) false = pan will sequence by colum and row. (boolean, default = true = randomise the rows and colums to pan)
// field 3 =(optional) limit the number of pan rows and colums to pan. (number, default = rows*colums)
// field 2 =(optional) the link href of the current image. (string, default = no href)
// field 3 =(optional) the title of the current image. (string, default = no title)
['http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg',[2,2,false,2],'http://www.vicsjavascripts.org.uk/','Winter Palace'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',[2,0]],
['http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg',[2,2]],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg']
],
ZoomDuration:1000, //(optional) the zoom duration in milli seconds. (number, default = 1000)
Opacity:true, //(optional) false = the image swap will not fade in. (boolean, default = true = the image swap will fade in)
AutoHold:2000, //(optional) the auto rotate 'hold' duration in milli seconds. (number, default = ms*2)
AutoStart:2000 //(optional) the auto rotate 'start' delay in milli seconds. (number, default = ms*2)
});
/*]]>*/
</script>
</body>
</html>