LightBox?

Jimmy1981 · 09-21-2012, 12:07 PM

Hi,

Can someone tell me what the blackberry developer website uses to get the effect where you have the picture and when you mouseover get a transparent div to appear?

https://developer.blackberry.com/cascades/sampleapps/

abduraooft · 09-21-2012, 02:48 PM

A quick google search for "animated image overlay description" gives http://www.jquery4u.com/plugins/30-t...image-plugins/

vwphillips · 09-21-2012, 03:14 PM

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[*/

.img {
  position:relative;left:100px;top:100px;width:351px;height:263px;border:solid red 1px;
}

.slide {
  position:absolute;left:0px;top:200px;width:351px;height:263px;background-Color:#FFCC66;
}

.slide2 {
  position:absolute;left:0px;top:-200px;width:351px;height:263px;background-Color:#FFCC66;
}

.slide3 {
  position:absolute;left:-300px;top:0px;width:351px;height:263px;background-Color:#FFCC66;
}

/*]]>*/
</style></head>

<body>
 <div class="img" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
  <div class="zxcslide slide" ></div>
 </div>
 <div class="img" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
  <div class="zxcslide slide2" ></div>
 </div>
 <div class="img" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
  <div class="zxcslide2 slide3" ></div>
 </div>

 <div class="img" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
  <div class="zxcslide2 slide3" style="left:300px;" ></div>
 </div>

<script type="text/javascript">
/*<![CDATA[*/
// Slide Panel (21-September-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcSlidePanel(o){
 var mde=o.Mode;
 var mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetLeft']:['top','offsetTop'],divs=document.getElementsByTagName('DIV'),ms=o.SlideDuration,op=o.Opacity,cls,obj,p,ary=[],z0=0;
 for (;z0<divs.length;z0++){
  obj=divs[z0];
  cls=divs[z0].className;
  if (cls&&(' '+cls+' ').match(' '+o.ClassName+' ')){
   p=divs[z0].parentNode;
   p.style.overflow='hidden';
   this.addevt(p,'mouseover','slide',ary.length,true);
   this.addevt(p,'mouseout','slide',ary.length,false);
   if (typeof(op)=='number'&&op>=0&&op<=100){
    obj.style.filter='alpha(opacity='+op+')';
    obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=op/100-.001;
   }
   p=divs[z0][mde[1]];
   ary.push([divs[z0],p,0,p,'dly'+z0]);
  }
 }
 this.mde=mde[0];
 this.ary=ary;
 this.ms=typeof(ms)=='number'&&ms>=0?ms:1000;
}

zxcSlidePanel.prototype={

 slide:function(nu,ud){
  var a=this.ary[nu],f=a[1],t=a[ud?2:3];
  clearTimeout(this[a[4]]);
  this.animate(this.mde,a,f,t,new Date(),this.ms*Math.abs((t-f)/a[3])+10);
 },

 animate:function(mde,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;
   ary[0].style[mde]=ary[1]+'px';
  }
  if (ms<mS){
   this[ary[4]]=setTimeout(function(){ oop.animate(mde,ary,f,t,srt,mS); },10);
  }
  else {
   ary[1]=t;
   ary[0].style[mde]=t+'px';
  }
 },

 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 zxcSlidePanel({
 ClassName:'zxcslide',  // the unique ID name of the parent DIV.                 (string)
 SlideDuration:500,     //(optional) the slide duration in milli seconds.        (number, default = 1000)
 Opacity:50             //(optional) the slide panel opacity~(0 to 100).         (number, default = no forced opacity)
});

new zxcSlidePanel({
 ClassName:'zxcslide2', // the unique ID name of the parent DIV.                 (string)
 Mode:'Horizontal',     //(optional) the slide mode 'Vertical' or 'Horizontal'.  (string, default = 'Vertical')
 SlideDuration:500,     //(optional) the slide duration in milli seconds.        (number, default = 1000)
 Opacity:50             //(optional) the slide panel opacity~(0 to 100).         (number, default = no forced opacity)
});

/*]]>*/
</script>


</body>

</html>