Slider Boilerplate

sliderBoilerplate.js

/*
 *  Project: Slider Boilerplate
 *  Description: Slider simples feito em jQuery
 *  Author: Hugo Dias | [email protected]
 *  License: 
 */

;(function ( $, window, undefined ) {
    
    var pluginName = 'sliderBoilerplate',
        document = window.document,
        defaults = {
            effect: "fade",
            timeout: 3000,
            effectTime: 300,
            slideshow: true
        };

    function Plugin( element, options ) {
        this.element = element;

        this.options = $.extend( {}, defaults, options) ;
        
        this._defaults = defaults;
        this._name = pluginName;
        
        this.init();
    }

    Plugin.prototype.init = function () {
        var $content,$slides;
        
        // Slider content and all slides
        $content = this.getElement( this.element );
        $slides = $content.children('ul').children();

        // Hide all slides and show the first on start
        this.hideSlides( $slides );

        // Slideshow
        if( this.options.slideshow ) this.slideshow( $slides );
    };


    Plugin.prototype.hideSlides = function( slides ) {
        return slides.hide(0,function(){ 
            slides.first().show()
        });
    };

    Plugin.prototype.getElement = function( element ) {
        var aux;
        aux = element.getAttribute("id") ? '#' + element.getAttribute("id") : '.' + element.getAttribute("class");
        return $(aux);
    };


    Plugin.prototype.slideshow = function(slides) {
        var effect, effectTime, $plugin;

        // Plugin
        $plugin = this;

        effectTime = this.options.effectTime;
        effect = this.options.effect;

        window.setInterval(function(){
            var $current;

            $.each(slides, function() {

                if( $(this).is(":visible") ) {
                    $current = $(this);

                    // Faz o slideshow com o efeito escolhido
                    switch( effect ) {
                        case 'fade':
                            // Fade effect
                            $plugin.fadeEffect( $current, slides );
                            break;
                    }
                    // Para o loop ao encontrar o slider visivel
                    return false;  
                }
            });            
        }, this.options.timeout );
    }


    Plugin.prototype.fadeEffect = function( element, slides ) {
        var effectTime;

        effectTime = this.options.effectTime;

        element.fadeOut( effectTime ,function() {
            // Caso exista um próximo elemento ( loop )
            if( element.next().length ) {
                element.next().fadeIn( effectTime );    
            } else { 
                // Caso não exista, pega o primeiro slider
                slides.first().fadeIn( effectTime );
            }
        });
    }

    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
            }
        });
    };

}(jQuery, window));