Tutorial - jQuery Plugin - um slideshow bem simples!

Salve, salve galera!

Estava procurando algum slide show em jQuery bem SIMPLES que tivesse apenas as seguintes funções:

• alternar entre as imagens com o efeito fade in;
• interromper o slide show on mouse over;
• seguir o slide show on mouse out;
• possibilidade de inserir os botões prev e next para navegação nos slides;

Busquei na internet e apareceram centenas exemplos e plugins! Acontece que achei todos um pouco complicado de mais pro meu gosto. Eu queria algo bem simples mesmo!

Então resolvi fazer um o mais simples e fácil de se utilizar possível. ^^

Botando as mãos na massa

Em primeiro lugar precisamos saber criar plugins pro jQuery. Encontrei um excelente tutorial aqui.

Ok, agora, segue o código do plugin do slideshow (para manter o padrão, sugiro criar e inserir o código a seguir no arquivo jquery.slideshow.js):

(function($){  
    $.fn.extend({   
     slideshow: function(options) {  
      var div = this;
            var defaults = {
                interval: 2000            };
            var options =  $.extend(defaults, options);  
            $('img', div).hide().first().show();
            var timerId = timerSlide(div, options.interval);
            $(div).hover(function() {
             clearInterval(timerId);
            }, function() {
             timerId = timerSlide(div, options.interval);            });
            $(div).children('.navigator').each(function() {;
             $(this).children('.prev').each(function() {
              $(this).click(function() {
               prevSlide(div);              });             });;
             $(this).children('.next').each(function() {
              $(this).click(function() {
               nextSlide(div);              });             });;                         });
         function timerSlide(div, interval) {
          return setInterval(function() {
           nextSlide(div);
          },  interval);         }
         function prevSlide(div) {
          var element = $('img', div).filter(function() { return $(this).css("display") == 'inline'; }).hide()                    .prev();
          if($(element).attr("id") == undefined) {
           element = $('img', div).last();          }
          $(element).fadeIn('slow');         }
         function nextSlide(div) {
          var element = $('img', div).filter(function() { return $(this).css("display") == 'inline'; }).hide()                    .next();
          if($(element).attr("id") == undefined) {
           element = $('img', div).first();          }
          $(element).fadeIn('slow');         }                    }      });
})(jQuery);

Muito simples, né?

E para usa-lo é mais simples ainda.

Basta criar uma div q possua a class slideshow. As imagens que tiverem dentro dessa div serão exibidas na ordem em que aparecem:

Agora é só incluir no load da página, a chamada para função slideshow. O trecho a seguir, configura todos os div's que contem a class slideshow:

$(function() {
 $('.slideshow').each(function() {
  $(this).slideshow();
 });
});

Agora sim: simples, fácil e indolor! ;D

Mais algumas opções

Por padrão, o plugin é configurado para alternar os slides de 2000 em 2000 milisegundos. Se deseja outro valor, por exemplo 5000, basta informar o parâmetro interval:

$(function() {
 $('.slideshow').each(function() {
  $(this).slideshow({interval: 5000});
 });
});

Se quiser incluir a função de navegação entre os slides, basta inserir uma nova div com a class navigation. Dentro dessa div, deve haver um link com a class prev e outro link com a class next. Dessa forma:

[<] 
    — 
   [>]
   

   
   
  

O resultado desse ultimo código é mais ou menos esse:

Prontinho. O plugin atende todos os requisitos! ^^

Agora é só usar!

;D

É isso!

PS: Reparei um comportamento estranho ao selecionar a div utilizando o firebug. Aparenetemente, o javascript se perde e configura o setInterval diversas vezes, o que dá a impressão de que os slides estão alternando mais rápido. Por enquanto vou deixar assim, pois normalmente o usuário comum não sabe nem o que é firefox, imagina só se ele sabe o que é firebug! rs..