A simple slideshow plugin for jQuery

Slideshow jQuery Plugin.js

(function($) { // this ensures that the plugin doesn't conflict with other code and is recommended for jQuery plugins: http://docs.jquery.com/Plugins/Authoring
  $.fn.slideshow = function(settings) { // declare the plugin function accepting a single argument 'settings' to override any of the defaults
    var config = { 'delay' : 4000, 'active_class' : 'active', 'navigation_selector' : '#navigation a' }; // some defaults which can be overridden by 'settings' above

    if (settings) $.extend(config, settings); // merge the defaults with the settings passed in above

    this.each(function() { // for each jQuery object matching the selector (e.g. $('ul#some-list > li').each(function() {}); would call the function inside passing in each element as 'this')
      var $this = $(this); // to prevent recreating a jQuery object every time I need $(this)

      $this.css('position', 'relative'); // set the slide wrapper as relative

      var $children = $this.children(); // get the immediate children of the slide wrapper
      
      $children.css({ 'position' : 'absolute', 'top' : 0, 'left' : 0 }); // make sure they overlap
      $children.hide(); // hide all of the slides

      var current = 0; // the current index of the slideshow

      $children.eq(current).show(); // show the slide at the current (0th) position

      var $navigation = $(config.navigation_selector); // will need this later

      var slideshow_loop = function() {
        current = (current + 1) % $children.length; // increment the current index by one but mod (%) by the number of slides to force the slideshow to wrap

        $children.fadeOut(); // fade out all children (should only be one slide)
        $children.eq(current).fadeIn(); // fade in the current slide)

        $navigation.removeClass(config.active_class); // remove the active class from all navigation elements
        $navigation.eq(current).addClass(config.active_class); // add the active class to the current navigation element
      };

      var interval = setInterval(slideshow_loop, config.delay); // setInterval will call the function slideshow_loop every config.delay milliseconds

      $navigation.click(function() { // when a navigation element is clicked
        clearInterval(interval); // stop looping the slideshow

        var $this = $(this); // the specific navigation element that was clicked

        current = $navigation.index($this); // set the current index to the index of the navigation element clicked

        $children.fadeOut();
        $children.eq(current).fadeIn();

        $navigation.removeClass(config.active_class);
        $this.addClass(config.active_class);

        setTimeout(function() { interval = setInterval(slideshow_loop, config.delay) }, config.delay * 2); // after 2*config.delay milliseconds start the slideshow ago

        return false; // this prevents the browser from scrolling to the top and altering the url with the hash-url (#)
      });
    });

    return this; // this allows chaining jQuery functions together by passing the jQuery element back out: e.g. $('#my-slideshow').slideshow().appendTo('#some-div')
  };
})(jQuery); // pass jQuery in to the plugin

$('#slideshow').slideshow({ 'delay' : 4000, 'navigation_selector' : '#navigation li a' }); // run the slideshow plugin on the #slideshow element, overriding some of the defaults