21 de agosto 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:

  1. Acesse o site jQuery, baixe a última versão da biblioteca e copie para a pasta "js" dentro do seu site.
  2. Acesse o site Cycle, baixe a última versão da biblioteca e copie para a pasta "js" dentro do seu site.
  3. 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>
  4. 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>
  5. 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>
  6. 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>
  7. 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.

Visualizações: 7.608



jQuery

06 de maio de 2014

Accordion com jQuery

Neste tutorial vamos aprender a fazer o efeito Accordion (também conhecido como Sanfona) com jQuery.

27 de agosto de 2013

Galeria com Miniatura jQuery

Neste tutorial vamos aprender a fazer uma Galeria de Imagens com Miniatura jQuery.

Sérgio Toledo | Full-Stack Web Developer | LinkedIn | GitHub | YouTube

Todos os direitos reservados ©