Help finding a lightbox similar to this...

pavsid · #1 11-07-2009, 05:23 AM

Ok, so maybe it's not really a lightbox but i'm looking for something similar to what this site has - i can;t work out how they've done it.

http://www.workatplay.com/

If you click on one of the boxes you will see that the 'lighbox' expands outwards from the origin and then contracts back into it again.

Are there any frameworks/plugins out there that achieve such an effect?

Thanks!

vwphillips · #2 11-07-2009, 09:19 AM

in principle

Code:

<!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[*/
.flip {
 position:absolute;left:40px;top:200px;width:100px;height:75px;background-Color:#FFCC66;
}

.flip IMG {
 width:100%;height:100%;
}

.content {
 position:absolute;overflow:hidden;visibility:hidden;left:800px;top:200px;width:300px;height:200px;background-Color:#339933;
}

/*]]>*/
</style>

<script type="text/javascript">
// Animate (01-October-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,fin){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[fin||0];
 return this;
}

zxcAnimate.prototype.update=function(srtfin,ms,scale,c){
 clearTimeout(this.to);
 this.time=ms||this.time||0;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcAnimate.prototype.cng=function(){
 var oop=this,ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.c=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.c=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
 this.apply();
 if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Complete) this.Complete(this);
 }
}

zxcAnimate.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

<script type="text/javascript">
/*<![CDATA[*/


function zxcFlip(fcls,ms,ccls,close){
 var flips=zxcByClassName(fcls);
 var cont=zxcByClassName(ccls);
 this.flip=[];
 this.cont=[];
 this.objs=[];
 for (var w,l,h,z0=0;z0<flips.length;z0++){
  this.objs[z0]=flips[z0];
  w=flips[z0].offsetWidth;
  l=flips[z0].offsetLeft;
  this.flip[z0]=[new zxcAnimate('width',flips[z0],w),w,flips[z0].getElementsByTagName('IMG')[0],new zxcAnimate('left',flips[z0]),l];
  this.flip[z0][0].oop=this;
  w=cont[z0].offsetWidth;
  h=cont[z0].offsetHeight;
  this.cont[z0]=[new zxcAnimate('left',cont[z0],w),w,new zxcAnimate('top',cont[z0],h),h,new zxcAnimate('width',cont[z0]),new zxcAnimate('height',cont[z0])]
  this.cont[z0][0].oop=this;
  this.addevt(flips[z0],'mouseup','Flip',z0);
  this.addevt(zxcByClassName(close,cont[z0])[0],'mouseup','Close',z0);
 }
 this.ms=ms||1000;
 this.nu=-1;
}

zxcFlip.prototype.Flip=function(nu){
 if (this.nu==-1){
  this.nu=nu;
  this.flip[nu][2].style.visibility='hidden';
  this.flip[nu][0].update([this.flip[nu][1],0],this.ms);
  this.flip[nu][0].Complete=function(){
   this.update([0,this.data[1]],this.time);
   this.Complete=this.oop.Content;
  }
  this.flip[nu][3].update([this.flip[nu][4],this.flip[nu][4]+this.flip[nu][1]/2],this.ms)
  this.flip[nu][3].Complete=function(){
   this.update([this.data[0],this.data[1]],this.time);
   this.Complete=false;
  }
 }
}

zxcFlip.prototype.Content=function(nu){
 var oop=this.oop;
 var pos=zxcPos(this.obj);
 var win=zxcWWHS();
 oop.cont[oop.nu][0].update([pos[0],(win[0]-oop.cont[oop.nu][1])/2+win[2]],oop.ms)
 oop.cont[oop.nu][2].update([pos[1],(win[1]-oop.cont[oop.nu][3])/2+win[3]],oop.ms)
 oop.cont[oop.nu][4].update([this.obj.offsetWidth,oop.cont[oop.nu][1]],oop.ms)
 oop.cont[oop.nu][5].update([this.obj.offsetHeight,oop.cont[oop.nu][3]],oop.ms)
 oop.cont[oop.nu][0].obj.style.visibility='visible';
}

zxcFlip.prototype.Close=function(nu){
 var pos=zxcPos(this.objs[nu]);
 var oop=this.cont[nu][0];
 oop.update([oop.data[0],pos[0]],this.ms);
 oop.Complete=function(){
  this.obj.style.visibility='hidden';
  this.oop.BackFlip();
  this.Complete=false;
 }
 oop=this.cont[nu][2];
 oop.update([oop.data[0],pos[1]],this.ms);
 oop=this.cont[nu][4];
 oop.update([oop.data[0],oop.data[1]],this.ms);
 oop=this.cont[nu][5];
 oop.update([oop.data[0],oop.data[1]],this.ms);
}

zxcFlip.prototype.BackFlip=function(nu){
 var nu=this.nu;
 this.flip[nu][0].update([this.flip[nu][1],0],this.ms);
 this.flip[nu][0].Complete=function(){
  this.update([0,this.data[1]],this.time);
  this.Complete=function(){
   this.oop.nu=-1;
   this.obj.getElementsByTagName('IMG')[0].style.visibility='visible';
   this.Complete=false;
  }
 }
 this.flip[nu][3].update([this.flip[nu][4],this.flip[nu][4]+this.flip[nu][1]/2],this.ms)
 this.flip[nu][3].Complete=function(){
  this.update([this.data[0],this.data[1]],this.time);
  this.Complete=false;
 }
}
zxcFlip.prototype.addevt=function(o,t,f,p){
 var oop=this;
 if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 else {
  var prev=o['on'+t];
  if (prev) o['on'+t]=function(e){ prev(e); oop[f](p); };
  else o['on'+t]=o[f];
 }
}

function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}

function zxcPos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}

function zxcWWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}




/*]]>*/
</script>


</head>

<body>
<div class="flip" >
 <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
</div>
<div class="content" >
 Content
 <div class="close" >Close</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/

new zxcFlip('flip',500,'content','close');
/*]]>*/
</script></body>

</html>

pavsid · #3 11-12-2009, 07:30 AM

Thanks a lot Vic, i'll have a play

pavsid · #4 11-12-2009, 07:32 AM

Sorry, one question, which function is it that controls the expanding of the content div relative to the position on the page?

vwphillips · #5 11-12-2009, 08:42 AM

Code:

zxcFlip.prototype.Content=function(nu){
 var oop=this.oop;
 var pos=zxcPos(this.obj);
 var win=zxcWWHS();
 oop.cont[oop.nu][0].update([pos[0],(win[0]-oop.cont[oop.nu][1])/2+win[2]],oop.ms)
 oop.cont[oop.nu][2].update([pos[1],(win[1]-oop.cont[oop.nu][3])/2+win[3]],oop.ms)
 oop.cont[oop.nu][4].update([this.obj.offsetWidth,oop.cont[oop.nu][1]],oop.ms)
 oop.cont[oop.nu][5].update([this.obj.offsetHeight,oop.cont[oop.nu][3]],oop.ms)
 oop.cont[oop.nu][0].obj.style.visibility='visible';
}

the lines in red position the popup in the center of the window

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)