Template Plugin jQuery

gistfile1.js

// Template de Método
(function($){
    $.myPlugin = function(settings){
        var config = {
            'foo': 'bar'
        };
        if (settings){$.extend(config, settings);}

        // code here

        return this;
    };
})(jQuery);

// Template de Função
(function($){
    $.fn.myPlugin = function(settings){
        var config = {
            'foo': 'bar'
        };
        if (settings){$.extend(config, settings);}

        return this.each(function(){
            // element-specific code here
        });
    };
})(jQuery);

// Exemplo: Plugin
// Slideshow jQuery

// Ele usa a função setInterval() 
// juntamente com os efeitos fadeOut() e 
// fadeIn() do jQuery para gerar o ciclo de quaisquer
// imagens dentro de um elemento HTML.

// Configuração

// HTML

<div id="slideshow">
    <img src="img/sample-image-1.png" alt="" />
    <img src="img/sample-image-2.png" alt="" />
    <img src="img/sample-image-3.png" alt="" />
    <img src="img/sample-image-4.png" alt="" />
</div>

// CSS

#slideshow img {
    display: none;
    position: absolute;
}

// JavaScript

(function($){
    $.simpleSlideShow = function(selector, settings){
        // settings
        var config = {
            'delay': 2000,
            'fadeSpeed': 500
        };
        if ( settings ){$.extend(config, settings);}

        // variables
        var obj = $(selector);
        var img = obj.children('img');
        var count = img.length;
        var i = 0;

        // show first image
        img.eq(0).show();

        // run slideshow
        setInterval(function(){
            img.eq(i).fadeOut(config.fadeSpeed);
            i = ( i+1 == count ) ? 0 : i+1;
            img.eq(i).fadeIn(config.fadeSpeed);
        }, config.delay);

        return this;
    };
})(jQuery);

// Uso

// Para ativar o slideshow
// na div #slideshow, nós simplesmente a chamamos usando o código JavaScript a seguir:

<script type="text/javascript">
    $.simpleSlideShow('#slideshow');
</script>

// Como permitimos que a configuração mudasse o comportamento do
// slideshow, poderíamos deixar 5 segundos
// entre as imagens e configurar a duração do “fade” para 200 ms usando:

<script type="text/javascript">
    $.simpleSlideShow('#slideshow', {'delay':5000, 'fadeSpeed': 200});
</script>