Simple Slideshow

by shapeshifta

HTML

<div class="gallery">
    <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" alt=""/>
    <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" alt="" class="hidden"/>
    <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" alt="" class="hidden"/>
</div>

CSS

.js .hidden { display: none } 

/* Slideshow mit simpleSlide*/
.gallery, .simpleSlide { width:516px;height:332px }
.gallery{ overflow-y:scroll }
.simpleSlide{ position:relative; overflow:hidden }
.simpleSlide img { position:absolute }

JavaScript

(function($) {

    $.fn.simpleSlide = function(method) {

        var defaults = {
            time: 3000
        };

        var settings = {};

        var methods = {

            init : function(options) {
                settings = $.extend({}, defaults, options);
                return this.each(function() {
                    var $this = $(this);
                    $this.addClass('simpleSlide');
                    $('img:gt(0)', $this).hide();
                    methods.setTimer($this);
                });
            },

            setTimer: function(el) {
                var $this = el;
                $(':first-child', $this).fadeOut()
                     .next('img')
                     .fadeIn()
                     .end()
                     .appendTo($this);
                setTimeout(function(){ methods.setTimer($this); }, settings.time );
            }

        };


        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error( 'Methode "' +  method + '" existiert nicht in simpleSlide plugin!');
        }

    };

})(jQuery);

$(function(){
   $('body').addClass('js');
   $('div.gallery').simpleSlide();
});