Olá
amigos do The Club,
Depois
de aprendermos algumas das principais funcionalidades do jQuery, este mês
preparei um artigo mais prático e independentemente de plataforma de
desenvolvimento a ser utilizada. Iremos ver a facilidade de desenvolver um
exemplo de banner rotativo, um recurso muito utilizado em todas as páginas web.
Faremos o uso do plugin “Cycle”.
O
que seria um plugin?
Podemos definir “plugins” como utilidades que o jQuery põe à
disposição dos desenvolvedores para ampliar as funcionalidades do framework. No
geral, servirão para fazer coisas mais complexas necessárias para resolver
necessidades específicas, mas as fazem de maneira que possam ser utilizadas no
futuro em qualquer parte e por qualquer web. Seria uma função que se acrescenta ao
objeto jQuery para que a partir desse momento responda a novos métodos. Neste
caso, o plugin “Cycle” se encarregará de criar diversos efeitos em um consjunto
de imagens, como por exemplo: efeitos de Zoom, esmaecimento, deslizamento,
entre outros.
Download e Instalação
Para
obter este plugin acesse a seguinte página do desenvolvedor para realizar o
download gratuito, Ver Imagem 01.
http://malsup.com/jquery/cycle/
 |
Figura 01: Site do Desenvolvedor.
|
No
site possuímos diversas dicas e exemplos referentes ao mesmo. Na região
superior esquerda podemos encontrar o link que irá nos redirecionar para a página
de Downloads.
Teremos
duas opções, sendo:
Cycle:
Contendo todos os recursos deste plugin.
Contendo todos os recursos deste plugin.
Cycle Lite:
Apenas
com algumas opções.
Escolha
a segunda opção clicando com o botão direito escolhendo “Salvar Link Como...”.
Ver Imagem 02.
 |
| Figura 02: Realizando o Download do Plugin. |
Criando
o projeto de Exemplo
O
exemplo se baseará na criação de uma página HTML com a funcionalidade do Plugin
Cycle. Iremos nos organizar da seguinte maneira. Crie uma pasta, por exemplo,
com o nome de “Exemplo_Plugin_Cycle” contendo mais duas subpastas e o arquivo
de exemplo:
Imagens:
Irá conter todas as imagens do projeto de exemplo.
Jquery: Teremos
o plugin jQuery (abordado nos artigos anteriores) e o Cycle. Ambos com extensão
”.js”.
Ver
Imagem 03.
 |
| Figura 03: Arquivos. |
Utilizaremos
qualquer editor de texto para esta tarefa, recomendo o uso do Notepad++, o
mesmo poderá ser encontrado gratuitamente no site abaixo:
https://notepad-plus-plus.org/download/v6.8.2.html
Com
o editor de texto aberto iremos criar uma página HTML simples contendo suas
TAGS padrões. Ver Código abaixo:
<html>
<head>
<title> jQuery 2.x com o plugin Cycle</title>
<script
type="text/javascript"
src="jquery/jquery-2.1.4.min.js"></script>
<script
type="text/javascript"
src="jquery/jquery.cycle.lite.js"></script>
Teremos
a declaração do jQuery e do plugin Cycle.
<script
type="text/javascript">
$(this.document).ready(function () {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
Na
TAG Head Implementaremos um script contendo uma função que utiliza a DIV
“slideShow” e em seguida invocando a função “cycle”. Passamos por parâmetro a
propriedade “Fade”. Através deste parâmetro as nossas imagens nos darão a
impressão de uma apresentação de Slides.
</head>
<body>
<div class="slideShow">
<img
src="imagens/img01.jpg" alt="Primeira Foto"
width="300" height="200" />
<img
src="imagens/img02.jpg" alt="Segunda Foto"
width="300" height="200" />
<img
src="imagens/img03.jpg" alt="Terceira Foto"
width="300" height="200" />
<img
src="imagens/img04.jpg" alt="Quarta Foto"
width="300" height="200" />
</div>
Na
TAG Body iremos inserir o caminho das Imagens do projeto.
</body>
</html>
Teremos
um resultado identico ao da Figura 04.
 |
| Figura 04:Apresentação de Slides. |
Principais Comandos
Os principais comandos deste plugin são:
- pause: Faz uma
pausa no slideshow , podendo ser retomado com o comando 'resume'.
- resume: Retoma
uma apresentação de slides em pausa,
- toggle: Alterna
o estado de pausa / resume do slideshow.
- next: Avança
slideshow para o próximo slide.
- prev: Avança slideshow para slide anterior.
- stop: Para o slideshow.
- destroy: Para os
slides e libera todos os eventos.
Exemplo:
$('#slideshow').cycle('pause');
Principais
Parâmetros
Teremos alguns parâmetros principais quando utilizamos este Plugin, sendo:
- activePagerClass : '
ActiveSlide ': Nome da classe usado para o elemento ativo.
- allowPagerClickBubble : false:
Permite ou impede de eventos clique sobre os links.
- animIn: null: Propriedades que definem a
animação do slide.
- autostop: 0: Para acabar slideshow após
transições X (onde X significa contagem de slides).
- autostopCount : 0: Número
de transições ( opcionalmente utilizadas com autostop para definir X)
- cssAfter : null: Propriedade
que define o estado do slide após a transição para fora.
- cssBefore : null: Propriedade
que define o estado inicial do slide antes da transição.
- delay : 0: Atraso adicional
(em ms) para a primeira transição (dica: pode ser negativo )
- fastOnEvent : 0: Forçar
transições rápidas quando acionado manualmente.
- fx : 'Fade ': Nome do
efeito de transição (ou nomes separados por vírgulas , ex : " fade,
scrollUp , Shuffle ' )
Exemplo
de utilização:
$('#shuffle').cycle({
fx:
'shuffle',
easing: 'easeOutBack',
delay:
-4000
});
Conclusões
Abordamos
neste artigo o Plugin “Cycle”, o mesmo sendo responsável por implementar
diversas facilidades para trabalharmos com Apresentação de Imagens (Banners
rotativos). Estas dicas servirão de base para qualquer plataforma Web.
Fica aí a
dica, um abraço e até o mês que vem!
Referências
http://malsup.com/jquery/cycle/
Nenhum comentário:
Postar um comentário