Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: LightBox?

  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    LightBox?

    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/

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    A quick google search for "animated image overlay description" gives http://www.jquery4u.com/plugins/30-t...image-plugins/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •