Simple jQuery Slideshow

Introduction

The jQuery Slideshow Plugin is a very simple slideshow addon for jQuery with no frills and with the simple job of flicking between any number of images after a set delay. The delay can be set to whatever is required and when it is reached the image will fade into the next one.

All that you need to set up the slideshow is a set of img elements inside a div element and then a simple JavaScript function call when the page loads. This will setup the slideshow and start it off.

Look right for a demo and bellow for the code to get your very own slideshow working.

Demo

To be honest the demo is a bit boring. All that happens is that the image on top fades out and makes way for the next. Then it repeats. That’s it. End of.

Sequence




Random




News

  1. Version 1.1 Released

    10
    Sep 2006

    After many many request I’ve finaly added support for randomised fading between a set of image. I’ve also decided to change the way the function is called to use the $ method fully. You will need to change all calls to the script to make the new version work. Hope this doesn’t mess too much up.

  2. Version 1.0.1 Released

    7
    Sep 2006

    This is a bug fix release to make it work fully in IE6. Works with both the latest SVN built and current build (1.0.1). Thanks to Rolf for pointing this out to me :D I’m planning another build in a few days that will add some new features that people have been adsking me about for a while now.

  3. CSS Added

    6
    Sep 2006

    In the usage example bellow I forgot to add the CSS that you’ll need to make it format right. Should work fine now if you add the CSS. Also if JavaScript is disabiled on the users computer then the last image in the list will be shown.

Code

The code bellow is free for you to use. Just go ahead and use it!

$.fn.slideshow = function(options) {
var settings = {
timeout: '2000',
type: 'sequence'
}
if(options)
$.extend(settings, options);
this.css('position', 'relative');
var slides = this.find('img').get();
for ( var i = 0; i < slides.length; i++ ) {
$(slides[i]).css('zIndex', slides.length - i).css('position', 'absolute').css('top', '0').css('left', '0');
}
if ( settings.type == 'sequence' ) {
setTimeout(function(){
$.slideshow.next(slides, settings, 1, 0);
}, settings.timeout);
}
else if ( settings.type == 'random' ) {
setTimeout(function(){
do { current = Math.floor ( Math.random ( ) * ( slides.length ) ); } while ( current == 0 )
$.slideshow.next(slides, settings, current, 0);
}, settings.timeout);
}
else {
alert('type must either be \'sequence\' or \'random\'');
}
};
$.slideshow = function() {}
$.slideshow.next = function (slides, settings, current, last) {
for (var i = 0; i < slides.length; i++) {
$(slides[i]).css('display', 'none');
}
$(slides[last]).css('display', 'block').css('zIndex', '0');
$(slides[current]).css('zIndex', '1').fadeIn('slow');
if ( settings.type == 'sequence' ) {
if ( ( current + 1 ) < slides.length ) {
current = current + 1;
last = current - 1;
}
else {
current = 0;
last = slides.length - 1;
}
}
else if ( settings.type == 'random' ) {
last = current;
while ( current == last ) {
current = Math.floor ( Math.random ( ) * ( slides.length ) );
}
}
else {
alert('type must either be \'sequence\' or \'random\'');
}
setTimeout((function(){$.slideshow.next(slides, settings, current, last);}), settings.timeout);
}

Usage

Using the code to create a slideshow is very simple. Just look at the example bellow and you should get the idea. If you don’t then you might want to reconsider being a web designer

<html>
<head>
<title>jQuery Slideshow</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/slideshow.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').slideshow({
timeout: 2000,
type: 'random'
});
});
</script>
<style type="text/css">
#slideshow {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border: 1px solid #000000;
}
#slideshow img {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="slideshow">
<img src="images1.jpg" alt="" />
<img src="images2.jpg" alt="" />
<img src="images3.jpg" alt="" />
<img src="images4.jpg" alt="" />
<img src="images5.jpg" alt="" />
</div>
</body>
</html>

Thats a very simple example but will work fully. The function you call has the following settings:

$('ID of slideshow').slideshow({
timeout: Time between slides in milliseconds (Default: 2000),
type: Type of slideshow: ’sequence’ or ‘random’ (Default: ’sequence’)
});

That’s it. That’s all you need to do. No there isnt any step 2 just go forth and create!

You can trackback to this page, or leave a comment bellow

Comments

  1. Nice JQuery plugin, but i got a problem. For exemple i use it to make a slide show of pictures wich are taken from a Database. If there is only 1 file to slide, then i got a Browser Freeze and an error from Javascript.

    Do you have any solution to solve that problem ?

      Posted by Christophe on January 10th, 2007 at 5:45 am  
  2. You’d need to show me an example as I’m not really sure what you mean. What browser are you testing in as well.

      Posted by Matt Oakes on January 12th, 2007 at 2:33 am  
  3. Gravatar

    Jirka

    Is there possibility to stop slideshow on mouseover and continue on mouseout?

      Posted by Jirka on January 14th, 2007 at 2:04 pm  
  4. I’m working on a pause function at the minute but I can’t get it to work if there’s more than one slideshow on the same page.

    I’ll keep working on it.

      Posted by Matt Oakes on January 20th, 2007 at 9:32 am  

Post A Comment

Name
Email
Website
Comment