Following Slides fadeOut and fadeInIn, this tutorial I will add one description box after the active slide fadeIn.

HTML

The description for each slide will be displayed in a <div> within the wrapper div. The HTML struction is as follow,

<div id="wrapper" >
    <ul class="slideshow" id="nt">
        <li><a href="#"><img src="../images/1.png" alt="1" border="0" /></a></li>  
        <li><a href="#"><img src="../images/2.png" alt="2"  border="0" /></a></li>  
        <li><a href="#"><img src="../images/3.png" alt="3" border="0" /></a></li>  
        <li><a href="#"><img src="../images/4.png" alt="4" border="0" /></a></li>  
    </ul>
    <div id="des"></div>
</div>

CSS

In order that the div box can be moved, its position property is set to absolute. Top value is make sure its initial postion is under the the slide box. The CSS of the div box is as follow.

    ...
    ...  // the rest is the same as Slides fadeOut and fadeInIn
#des{
    position:absolute;
    background-color:#a00;
    width:200px;
    height:60px;
    top:145px;
}

slideshow object

The construction keeps almost the same but set the initial opacity of the description box as half transparent.

function slideshow(id){
    ...
    Opacityto($("des"),80); // set the opacity of discrition box as 80
    ...
}

To make sure the description box is always on the top, its z-Indedx property is always larger than that of <li> tags. Description box moves in as callback function and after 800 milliseconds pause and then move out.

...
show: function(){
    _this.k = (_this.dir == "plus") ? _this.k+1 : _this.k-1;
    if (_this.k== _this.len) {
        _this.dir = "minus";
        _this.k = _this.len -1;
    }
    else if (_this.k==0) {
        _this.dir = "plus";  
        _this.k = _this.k+1;
    } 
    _this.zindex +=1;
    h1 = 145;
    h2 = 85;
    if (_this.dir == "plus") {   
        _this.lis[_this.k].style.zIndex = _this.zindex;
        var elms = [_this.lis[_this.k-1],_this.lis[_this.k]]; 
      
    }
    else if (_this.dir == "minus") { 
        _this.lis[_this.k-1].style.zIndex = _this.zindex; 
         var elms = [_this.lis[_this.k],_this.lis[_this.k-1]]; 
    }
    
     $("des").style.zIndex = _this.zindex+1;
     $f(elms).fadeIn(1000,function(){  
          $("des").move({delay:100,to:{left:0,top:h2}},function(){              
               ( function(){
                $("des").move({delay:100,to:{left:0,top:h1}});
                }).delay(800);                     
          });    
     });
},

How to use ?

Just 2 lines to go ...

 
var ss1 = new slideshow("nt");
ss1.go();

Demo

Demo of Slides fadeIn with description box