Image slideshow with jQuery UI effects

jQuery UI come bundled with an outstanding set of visual effects. In this article I'll show you how to apply such effects to a jQuery image slideshow. As you will see, results won't disappoint you.

The markup

First, our base markup structure:

<div id="slideshow">

 <div id="slideshow-wrapper">
 
  <img src="img/1.jpg" alt="Lorem ipsum sit" />
  <img src="img/2.jpg" alt="Etiam autem et dolor lorem ipsum sit" />
  <img src="img/3.jpg" alt="Iban forte sicut meus est mos" />
  <img src="img/4.jpg" alt="Nescio quid meditans" />
  
  <div id="caption"></div>
  
 </div>

</div>

After this, we need to include all the required JavaScript files in our page:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.effects.core.js"></script>
<script type="text/javascript" src="js/jquery.effects.blind.js"></script>
<script type="text/javascript" src="js/jquery.effects.clip.js"></script>
<script type="text/javascript" src="js/jquery.effects.drop.js"></script>
<script type="text/javascript" src="js/jquery.effects.explode.js"></script>
<script type="text/javascript" src="slideshow.js"></script>

We'll use the blind, clip, drop and explode jQuery UI effects. Since we have four images, we're going to use a different effect on each image.

The CSS styles

Our CSS styles are really simple:

#slideshow {
 width: 900px;
 height: 558px;
 margin: 3em auto;
 position: relative;
 background: url(img/bg.jpg) no-repeat;
}

#slideshow-wrapper {
 width: 400px;
 height: 360px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -180px 0 0 -200px;
}

#slideshow-wrapper img {
 display: none;
}

#slideshow-wrapper #caption {
 text-align: center;
 padding: 5px 0;
 font: 1.4em serif;
 display: none;
}

The jQuery code

In our file called slideshow.js we have to associate a different effect to each image. For that reason, we'll use a cyclic timer which increments (and resets) a counter that will be used to select the current image.

We also need to change the text of our caption using the alt attribute of the current image. Here's the code:

var Slideshow = new function() {

 var wrapper = $('#slideshow-wrapper', document.getElementById('slideshow')),
  images = $('img', wrapper),
  caption = $('#caption', wrapper),
  index = -1,
  timer = null;
  
 var showImage = function(i) {
 
  var image = images.eq(i);
  var text = image.attr('alt');
  
  images.hide();
  caption.hide();
  
  switch(i) {
  
   case 0:
   
   
   
   image.effect('explode',
        {
          mode: 'show',
          pieces: 4
        }, 1000, function() {
   caption.text(text).fadeIn(1000);
   
   
   });
   
   break;
   
   case 1:
   
   
   
   image.effect('drop',
        {
          mode: 'show',
          direction: 'bottom'
        }, 1000, function() {
   caption.text(text).fadeIn(1000);
   
   });
   
   break;
   
   
   case 2:
   
   
   
   image.effect('clip',
        {
          mode: 'show',
          direction: 'vertical'
        }, 1000, function() {
       caption.text(text).fadeIn(1000);
       });
   
   break;
   
   
   case 3:
   
   
   
   image.effect('blind',
        {
          mode: 'show',
          direction: 'vertical'
        }, 1000, function() {
   caption.text(text).fadeIn(1000);
   
   });
   
   break;

      
  
  
  }
 
 
 };
 
 var slide = function() {
 
 
  timer = setInterval(function() {
  
   index++;
   
   if(index == images.length) {
   
    index = -1;
   
   }
   
   showImage(index);
  
  }, 2000);
 
 
 };
 
 this.init = function() {
 
  slide();
 
 };


}();

$(function() {

 Slideshow.init();

});

You can see the results below.

Demo

Live demo

Download

ZIP file

Leave a Reply

Note: Only a member of this blog may post a comment.