21 de August de 2013

Plugin jQuery

Neste tutorial vamos aprender como usar um Plugin jQuery.

A maioria dos Plugins jQuery seguem a mesma linha de configuração usando requisitos similares, depois que se aprende a configurar um, fica mais fácil entender todos os outros.

Para começar vamos aprender a configuração de um Plugin jQuery muito útil e simples chamado Cycle. Com este plugin é possível criar um banner rotativo de imagens de forma fácil e rápida.

A primeira coisa que sempre iremos inserir é a própria biblioteca jQuery, existem algumas formas de usá-la como por exemplo apontando para um caminho específico onde a biblioteca se encontra, mas na forma que vou ensinar aqui, será necessário baixar o arquivo no site jQuery e copiá-lo para uma pasta, normalmente o nome da pasta é "js". Você também irá notar que existem versões diferentes do arquivo pois a equipe de desenvolvimento sempre está lançando atualizações e também irá encontrar dois tipos básicos de arquivo, o compressed (compactado) e o uncompressed (descompactado), você pode baixar os dois e ver a diferença, embora a função seja exatamente a mesma, o compressed é escrito de uma forma bem resumida o que torna o arquivo reduzido, economizando assim espaço.

O segundo passo será baixar o Plugin jQuery que no nosso caso é o Cycle. Ele também deve ser copiado na mesma pasta "js", pois é lá que ficarão todos os seus Plugins jQuery.

O terceiro e último passo é "inicializar" o plugin. Nesta inicialização iremos inserir algumas configurações necessárias do nosso plugin.

Agora que já esclarecemos a teoria vamos à prática:

Acesse o site jQuery, baixe a última versão da biblioteca e copie para a pasta "js" dentro do seu site.
Acesse o site Cycle, baixe a última versão da biblioteca e copie para a pasta "js" dentro do seu site.

Dentro das tags Head inclua as seguintes linhas:

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.cycle.lite.js"></script>

Embora o código a seguir possa ser inserido em qualquer parte da página, por questões de organização do código insira também dentro da tag Head, logo após as linhas anteriores. Segue a inicialização:
```
<script>
    $(document).ready(function() {
        $('.slideshow').cycle({ 
            fx: 'fade' 
        }); 
    });
</script>
```

Agora vamos criar a estrutura de imagens da nossa página, levando em conta que você já tenha uma pasta chamada "images" com as três fotos dentro:

<div class="slideshow">
    <img src="images/foto1.jpg" alt="Foto 1">
    <img src="images/foto2.jpg" alt="Foto 2">
    <img src="images/foto3.jpg" alt="Foto 3">
</div>

A estrutura final do seu arquivo deve ficar como o exemplo:

<!doctype html>
<html>
    <head>
      <title>jQuery Cycle Plugin</title>
      <!-- Scripts -->
      <script src="js/jquery-1.10.2.min.js"></script>
      <script src="js/jquery.cycle.lite.js"></script>
      <script>
        $(document).ready(function() {
          $('.slideshow').cycle({
            fx: 'fade'
          });
        });
      </script>
    </head>

    <body>
      <div class="slideshow">
        <img src="images/foto1.jpg" alt="Foto 1">
        <img src="images/foto2.jpg" alt="Foto 2">
        <img src="images/foto3.jpg" alt="Foto 3">
      </div>
    </body>
</html>

Se tudo correu bem o banner rotativo deve estar funcionando. Se não funcionar, verifique os nomes e caminhos dos arquivos novamente.

Note que na inicialização estamos usando o efeito Fade, troque por scrollDown e veja a diferença.

Existem diversos efeitos no site da Cycle, faça as alterações e veja o resultado.

Também há outras opções mais avançadas deste plugin, mas para nosso tutorial já está bom.

Plugin jQuery

Tutoriais

Últimos Artigos