Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.parent {
position:absolute;left:200px;top:200px;width:600px;height:600px;border:solid red 1px;
}
.thumb {
position:absolute;left:400px;top:10px;width:180px;height:140px;background-Color:#FFCC66;
}
.thumb IMG {
position:absolute;left:10px;top:10px;width:160px;height:120px;
}
.full {
position:absolute;width:380px;height:290px;background-Color:#FFCC66;
}
.full IMG {
position:absolute;left:25px;top:20px;width:330px;height:248px;
}
/*]]>*/
</style></head>
<body>
<div id="tst" class="parent" >
<div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></div>
<div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" /></div>
<div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" /></div>
<div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" /></div>
<div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" /></div>
<div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" /></div>
<div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="img" /></div>
<div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="img" /></div>
<div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></div>
<div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" /></div>
<div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" /></div>
<div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" /></div>
<div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" /></div>
<div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" /></div>
<div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="img" /></div>
<div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="img" /></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Expand Gallery (29-March-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
function zxcExpandGallery(o){
var id=o.GalleryID,obj=document.getElementById(id),tg=o.Toggle,ms=o.Animate,nu=o.Expand,days=o.Persistence,exp=o.OnExpand,thumbs=obj?this.bycls(o.ThumbClass,obj):[],full=obj?this.bycls(o.ExpandClass,obj):[];
if (obj&&thumbs[1]&&full[1]){
var ow=obj.offsetWidth,tw=thumbs[0].offsetWidth,th=thumbs[0].offsetHeight,fw=full[0].offsetWidth,fh=full[0].offsetHeight,cols=Math.floor(ow/tw),w=Math.floor(ow/cols),p=Math.floor((ow/cols-tw)/2),h=th+p,days=(typeof(days)=='number'&&days>0)||days=='session'?days:-1,ck=this.cookie(id),t,f,r,c,x,y,tary=[],fary=[],rcary=[],z0=0,z1=0;
for (;z0<thumbs.length;z0++){
t=thumbs[z0];
t.style.width=tw+'px';
t.style.height=th+'px';
tary[z0]=[t,z0];
f=full[z0]?full[z0]:t.cloneNode(false)
f.style.top='0px';
f.style.width=fw+'px';
f.style.height=fh+'px';
f.style.clip='rect(0px,'+fw+'px,0px,0px)';
fary[z0]=[f,'',0];
}
for (;z1<tary.length+Math.ceil(fw/tw)*Math.ceil(fh/th);z1++){
r=Math.floor(z1/cols),c=z1%cols;
x=c*w+p,y=r*h+p;
rcary[z1]=[r,c,x,y];
if (tary[z1]){
tary[z1][0].style.left=x+'px';
tary[z1][0].style.top=y+'px';
tary[z1][2]=rcary[z1];
tary[z1][3]=[tary[z1][0],'left',x];
tary[z1][4]=[tary[z1][0],'top',y];
this.addevt(tary[z1][0],'mouseup','open',z1);
tg!==false?this.addevt(fary[z1][0],'mouseup','close',null):null;
}
}
o=this;
o.id=id;
o.obj=obj;
o.tary=tary;
o.fary=fary;
o.rcary=rcary;
o.oary=[obj,'height',tary[tary.length-1][4][2]+th+p];
o.cs=Math.ceil(fw/w)-1;
o.rs=Math.ceil(fh/h)-1;
o.mc=Math.ceil(fw/w)-o.cs;
o.cols=cols;
o.fh=fh;
o.fw=fw;
o.th=th;
o.fh=fh;
o.p=p;
o.f=fary[0];
o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
o.days=days;
o.exp=typeof(exp)=='function'?exp:false;
o.obj.style.height=o.oary[2]+'px';
nu=days!=-1&&ck&&thumbs[ck]?ck*1:nu;
o.exp?o.exp(nu):null;
tary[nu]?this.open(nu):null;
}
}
zxcExpandGallery.prototype={
open:function(nu){
var o=this;
if (o.tary&&o.tary[nu]){
var rca=o.rcary,a=o.tary[nu],f=o.fary[nu],r=a[2][0],c=a[2][1],c=Math.min(c,o.mc),tary=o.tary.concat(),rc=rca[r*o.cols+c],d=new Date(),z0=0,z1=0;
f[0].style.zIndex='2';
f[0].style.left=rc[2]+'px';
f[0].style.top=rc[3]+'px';
o.animate(o,f,f[2],o.fh,d,o.ms);
a[0].style.zIndex='0';
o.animate(o,a[3],a[3][2],rc[2],d,o.ms);
o.animate(o,a[4],a[4][2],rc[3],d,o.ms);
tary.splice(o.tary[nu][1],1);
rc=[];
for (;z0<rca.length;z0++){
if ((rca[z0][0]<r||rca[z0][0]>r+o.rs)||(rca[z0][1]<c||rca[z0][1]>c+o.cs)){
rc.push(rca[z0]);
}
}
o.close(nu,tary,rc);
}
},
close:function(nu,tary,rc){
var o=this,d=new Date(),f,z0=0;
if (o.tary){
if (o.f){
this.animate(o,o.f,o.f[2],0,d,o.ms,true);
o.f[0].style.zIndex='1';
}
f=o.fary[nu];
tary=f&&tary?tary:o.tary;
rc=f&&rc?rc:o.rcary;
for (;z0<tary.length;z0++){
a=o.tary[tary[z0][1]];
a[0].style.zIndex='3';
this.animate(o,a[3],a[3][2],rc[z0][2],d,o.ms);
this.animate(o,a[4],a[4][2],rc[z0][3],d,o.ms);
}
o.animate(o,o.oary,o.oary[2],Math.max(rc[z0][3]+o.th,f?f[0].offsetTop+o.fh:0)+o.p,d,o.ms);
o.exp?o.exp(nu):null;
document.cookie=o.id+'='+nu+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/;':';');
o.f=f;
}
},
animate:function(o,a,f,t,srt,mS,nxt){
clearTimeout(a[3]);
var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[2]=Math.max(n,f<0||t<0?now:0);
a[1]?a[0].style[a[1]]=a[2]+'px':a[0].style.clip='rect(0px,'+o.fw+'px,'+a[2]+'px,0px)';
}
if (ms<mS){
a[3]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
}
else {
a[2]=t;
a[1]?a[0].style[a[1]]=a[2]+'px':a[0].style.clip='rect(0px,'+o.fw+'px,'+a[2]+'px,0px)';
nxt?a[0].style.top='-30000px':null;
}
},
cookie:function(nme){
var re=new RegExp(nme+'=[^;]+','i');
return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
},
bycls:function (nme,el){
for (var els=el.getElementsByTagName('*'),ary=[],z0=0;z0<els.length;z0++){
if((' '+nme+' ').match(' '+els[z0].className+' ')){
ary.push(els[z0]);
}
}
return ary;
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}
}
new zxcExpandGallery({
GalleryID:'tst', // the unique ID name of the gallery parent DIV element. (string)
ThumbClass:'thumb', // the common class name of the thumb nail DIV elements. (string)
ExpandClass:'full', // the common class name of the expanded DIV elements. (string)
Animate:500, //(optional) the animation duration in milli seconds. (number, default = 1000)
Expand:4, //(optional) the index number of the Expand DIV to display. (number, default = no expanded DIV on initalization)
Toggle:true, //(optional) false = the expanded DIV can not be toggled close. (number, default = true = the expanded DIV can be toggled close)
Persistence:1, //(optional) the number of days to restore the last display. (number, default = -1)
//(optional) 'session' = restore the last display for the browser session. (number, default = -1 days)
OnExpand:function(nu){ //(optional) a function to be call when an epand DIV is expanded or closed. (function, default = no function)
// the script returns the index number of the expanded DIV or null if all DIVs are closed.
}
});
/*]]>*/
</script>
</body>
</html>
Senior Coders
Expand Portfolio List
Posting Permissions
Reply With Quote
Bookmarks