Minimal jQuery Image Slideshow with Fade Effects - Photo Fader

Photo Fader is a super light and easy jQuery plugin to fade in/out a set of photos at a certain interval as an image slideshow.

Basic Usage:

1. Wrap a set of images in a unordered list.

<ul id="demo" class="image_fader">
<li><img src="images/1.jpg" alt="Alt 1" title="Title 1"/></li>
<li><img src="images/2.jpg" alt="Alt 2" title="Title 2"/></li>
<li><img src="images/3.jpg" alt="Alt 3" title="Title 3"/></li>
...
</ul>

2. The basic CSS for the slideshow.

.image_fader {
list-style-type: none;
padding: 0;
margin: 20px 0 0 20px;
position: relative;
}
.image_fader li {
margin: 0;
padding: 0;
position: absolute;
}
#my_fader {
width: 320px;
height: 480px;
}

3. Load the jQuery library at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

4. Customize the slideshow in the javascript.

var my_fader = $(".image_fader"); // the selector of the slideshow wrapper

function make_image_fader(element,int_time, fade_time) {
if (!int_time) {
int_time = 3000;
}
if (!fade_time) {
fade_time = 1000;
}
var items = $(element).find("li");
var from_index = 0;
var to_index = 1;
var max_index = items.length -1;
items.not(":first").css({ display: "none"});
setInterval(function() {
//console.log(from_index + " - " + to_index);
transiton(items.eq(from_index), items.eq(to_index), fade_time);
from_index++;
to_index++;
if (from_index == max_index) {
 to_index = 0;
}
if (from_index > max_index){
from_index = 0;
}

}, int_time);
}

function transiton(from, to, fade_time){
if (!fade_time){
fade_time = 1000;
}
$(from).fadeOut(fade_time, function(){
$(to).fadeIn(fade_time);
});
}

make_image_fader(my_fader,4000, 1000);

---

This awesome jQuery plugin is developed by angeleah. For more Advanced Usages, please check the demo page or visit the official website.