Archive for July, 2009

jQuery Slideshow Plugin09
Jul

This is a really simple plugin but it is code that I have found myself re-using on various projects and I therefore assume that it will be of use to others as well. The overall effect is very straight forward. A slideshow which fades cyclically between images in a gallery.

The plugin can be implemented as follows.

HTML

<div id='myID'>
<img src='path/to/image-1.jpg' />
<img src='path/to/image-2.jpg' />
<img src='path/to/image-3.jpg' />
...
<img src='path/to/image-n.jpg' />
</div>

JavaScript

$('#myDiv').slideshow();

That’s it! This results in the following effect.

12345

There are two optional parameters that can be passed to the slideshow method. The first is an integer which represents the duration of the fade effect (default 800ms). The second is also an integer and represents the amount of time each image is shown for (default 6000ms). If we wanted to have a faster fade, say 300ms and show each image for only 2 seconds we could use the following code.

JavaScript

$('#myDiv').slideshow(300,2000);

This code would achieve the following effect.

abc

 
As demonstrated by this page it is possible to animate multiple galleries on the same page. Each gallery works independently and can have a any number of images. It is also possible to specify different fade times and display times for each gallery if required.

This plugin is available for download both as a zipped folder containing a full demo (16k) or as a single javascript file. If you use the plugin on a project I would love from you. Additionally if anyone finds any bugs or would like to see any new features please let me know and I will do my best to help.