jQuery: a slideshow with overlay

So far we've always seen simple slideshows where the only animation available was the sliding effect on the main slide container. In this post I'll show you how to add a further animation on the slides that will make a simple overlay element appear when the sliding movement is complete. This can be easily achieved with jQuery and the aid of some default CSS rules. To start with, let's take a look at the basic markup structure of our slideshow:

<div id="slideshow">

<ul id="slideshow-wrapper">

 <li>
  <img src="img/pics/1.jpg" alt="" />
  <div class="overlay">
   <p>Overlay text.</p>
  </div>
 </li>
 <!--more slides-->
</ul>
</div>

Our overlay element is contained within each list item together with our images. To make it appear as we want, we need first to zero its width and absolutely position it within each item:

#slideshow {
 width: 500px;
 height: 400px;
 position: relative;
 margin: 0 auto;
 overflow: hidden;
}

#slideshow-wrapper {
 margin: 0;
 padding: 0;
 width: 2500px;
 height: 400px;
 list-style: none;
 position: relative;
}

#slideshow-wrapper li {
 float: left;
 width: 500px;
 height: 400px;
 position: relative;
}

#slideshow-wrapper img {
 display: block;
 width: 500px;
 height: 400px;
}

#slideshow-wrapper div.overlay {
 width: 0px;
 height: 400px;
 overflow: hidden;
 background: #666;
 color: #fff;
 text-align: center;
 line-height: 400px;
 position: absolute;
 top: 0;
 left: 0;
 font-weight: bold;
 text-transform: uppercase;
}

#slideshow-wrapper div.overlay p {
 display: inline;
}

See the final effect? We want that our overlay element appear from left to right when the sliding movement is complete. Our jQuery code is nothing special, except for the new animation added on each slide:

var getSlidePositions = function() {

 var offsets = [];
 
 $('li', '#slideshow-wrapper').each(function(i) {
 
   var left = $(this).position().left;
   offsets[i] = left;
 
 });
 
 return offsets;

};

$(function() {

  $('div.overlay', '#slideshow-wrapper').
  css('opacity', '0.7');
  
  var len = $('li', '#slideshow-wrapper').length;
  var index = 0;
  
  var positions = getSlidePositions();
  
  var interval = setInterval(function() {
  
    index++;
    
    if(index == len) {
    
      index = 0;
    
    }
    
    var overlay = $('div.overlay', '#slideshow-wrapper').
                  eq(index);
                  
    $('#slideshow-wrapper').animate({
      left: - positions[index]
    }, 1000, function() {
    
      $('div.overlay', '#slideshow-wrapper').
      not(overlay).css('width', '0px');
      
      overlay.animate({
        width: 250
      }, 500);
    
    });
  
  
  
  }, 1500);


});

We've first set the opacity of our overlay element. Then we've used the callback function of the first call to the animate() method to make it appear on each slide. Since we want that only one overlay element be visible each time, we've hidden all the others. You can see the demo below.

Demo

Live demo