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.