<!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[*/
#gallery {
position:relative;width:700px;height:204px;border:solid red 1px;background-Color:#FFFFCC;
}
#gallery IMG {
width:200px;height:150px;margin-Left:0px;margin-Top:15px;border-Width:0px;
}
#gallery .caption {
width:200px;background-Color:#FFFFCC;border:solid red 1px;margin-Top:5px;
}
#paginate {
position:relative;width:700px;height:40px;border:solid red 1px;margin-Top:5px;background-Color:#FFFFCC;
}
#paginate .page{
position:relative;width:20px;height:20px;background-Color:#FFFFCC;border:solid red 1px;margin-Left:20px;margin-Top:10px;float:left;text-Align:center;cursor:pointer;
}
#paginate .current{
background-Color:#FFCC66;
}
/*]]>*/
</style>
<script type="text/javascript">
// Gallery (16-October-2013) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcGallery={
GoTo:function(id,n){
var o=this['zxc'+id];
if (o&&o.ary[n]&&n!=o.n){
o.ary[o.n][2].className='page';
this.animate(o,o.ary[o.n],0,o.w*(n>o.n?-1:1),new Date(),o.ms);
this.animate(o,o.ary[n],o.w*(n>o.n?1:-1),0,new Date(),o.ms);
o.ary[n][2].className='page current';
o.n=n;
}
},
init:function(o){
var id=o.GalleryID,iary=o.ImageArray,c=o.Colums,r=o.Rows,ms=o.Animate,p=document.getElementById(id),pag=document.getElementById(o.PaginateID);
if (p&&iary instanceof Array){
var w=p.offsetWidth,h=p.offsetHeight,r=typeof(r)=='number'&&r>0?r:1,c=typeof(c)=='number'&&c>0?c:3,d=document.createElement('DIV'),i=document.createElement('IMG'),dd=d.cloneNode(false),pge,set,di,dt,a,z0=0;
p.style.overflow='hidden';
dd.style.position='absolute';
dd.style.top='0px';
dd.style.width=w+'px';
dd.style.height=h+'px';
o.ary=[];
for (;z0<iary.length;z0++){
if (z0%(r*c)==0){
set=dd.cloneNode(false);
p.appendChild(set);
set.style.left=(o.ary.length>0?w:0)+'px';
pge=document.createElement('DIV');
if (pag){
pge.className='page'+(o.ary.length>0?'':' current');
pge.innerHTML=o.ary.length+1;
pag.appendChild(pge);
this.addevt(pge,'mouseup','GoTo',id,o.ary.length);
}
o.ary.push([set,'left',pge]);
}
if (z0%c==0){
dr=d.cloneNode(false);
dr.style.position='relative';
dr.style.height=h/r+'px';
set.appendChild(dr);
}
di=dd.cloneNode(false);
di.style.width=w/c+'px';
di.style.left=w/c*(z0%c)+'px';
di.style.textAlign='center';
dr.appendChild(di);
a=document.createElement('A');
iary[z0][2]?a.href=iary[z0][2]:null;
di.appendChild(a);
i=document.createElement('IMG');
i.src=iary[z0][0];
a.appendChild(i);
dt=dd.cloneNode(false);
dt.innerHTML=iary[z0][1]||'';
dt.className='caption';
iary[z0][1]?di.appendChild(dt):null;
dt.style.width=i.width+'px';
dt.style.height='20px';
dt.style.left=i.offsetLeft+(i.width-dt.offsetWidth)/2+'px';
dt.style.top=i.offsetTop+i.height+'px';
}
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.w=w;
o.n=0;
this['zxc'+id]=o;
}
},
animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[0].style[a[1]]=n+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[0].style[a[1]]=t+'px';
}
},
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;
}
}
</script>
</head>
<body>
<div id="gallery" ></div>
<div id="paginate" ></div>
<script type="text/javascript">
//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", link url"]
zxcGallery.init({
GalleryID:'gallery', // the unique ID name of the parent DIV. (string)
ImageArray:[ // the image definition array. (array)
// field 0 = the image SRC.
// field 1 = (optional) the image caption.
// field 2 = (optional) the image link URL.
["http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg", "", "photo1-large.jpg"],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg", "Our car", ""],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg", "Our dog", "photo3-large.jpg"],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg", "Our hotel", "http://www.gohawaii.com/"],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg", "Our Computer", "http://www.google.com", "_new"],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg", "Our house", "photo6-large.jpg"],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg", "Our Friends", "http://www.ask.com"]
],
Colums:3, //(optional) the number of colums. (number, default = 3)
Rows:1, //(optional) the number of rows. (number, default = 1)
Animate:1000, //(optional) the animation duration in millisec. (number, default = 100)
PaginateID:'paginate' //(optional) the unique ID name of the pagination DIV. (number, default = 100)
});
</script>
</body>
</html>