anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Crie um Slideshow com jCycle – parte 2

banner_cycle_part2

Nesta segunda etapa de nosso tutorial, continuamos com o passo a passo para criar um slideshow cheio de efeitos utilizando o plugin jQuery Cycle, também conhecido como jCycle! Agora, chegou a hora de mostrar como inserir incluir os botões de ação e as legendas para as imagens de nossa galeria!

Importante: esse tutorial é a segunda parte de um total de três sobre o plugin JCycle, que está sendo publicado no blog do Web Design. Se você ainda não leu a primeira parte, recomendo a leitura para uma compreensão completa do que está sendo desenvolvido clicando no link a seguir:

http://www.blogdoscursos.com.br/crie-um-slideshow-com-jcycle-parte-1/

Continuando o trabalho que desenvolvemos na primeira parte do tutorial, nosso primeiro passo nessa nova etapa será o de inserir os botões de ação, que servirão para comandar a visualização das imagens. Vamos utilizar o programa Adobe Fireworks para realizar essa tarefa.

Inicie o programa e na tela de boas vindas clique no link Documento do Fireworks (png).

fig1_0

Em seguida, na tela de configuração do novo documento, coloque 45 pixels para a largura45 pixels para a altura e resolução de 150 pixels/polegada. Na cor da tela do desenho, deixe branco mesmo, isso vai garantir uma boa qualidade visual para o nosso botão. Finalize clicando no botão OK.

fig1_1

Agora, com o documento em branco aberto em sua tela, selecione a ferramenta retângulo na barra de ferramentas do programa.

fig1_2

Crie um retângulo cobrindo toda a tela do desenho. Caso queira mudar a cor desse retângulo, clique na caixa de opções ao lado do ícone de lata de tinta (indicada pela seta na imagem a seguir):

fig1_3

Na sequência, novamente na barra de ferramentas lateral, selecione a ferramenta de Texto.

fig1_4

Leve o cursor até que fique sobre o retângulo criado no passo anterior e insira o sinal de > , seu resultado ficará como o da figura abaixo:

fig1_5

Com isso, terminamos de criar a imagem de nosso primeiro botão. O segundo botão será o da seta apontando para a esquerda, mas faremos esse somente depois de exportarmos o atual.

Selecione a ferramenta Fatia do Fireworks na barra de ferramentas do programa e clique e arraste sobre o botão que criou. Isso criará  uma fatia verde que cobrirá toda a tela do desenho, como nas figuras abaixo:

fig1_6

fig1_7

Após criar a fatia, clique com o botão direito do mouse sobre ela. Nas opções que aparecerão, escolha Exportar fatia selecionada, indique a pasta para salvar as imagens (a mesma do começo do nosso tutorial no primeiro artigo) e salve a fatia.

fig1_8

Repare no nome sugestivo que foi dado a imagem… como regra básica evite usar espaços em branco entre palavras, use underline para ligá-las, ok?

Para criar o segundo botão volte ao Fireworks, e clique na ferramenta Ocultar fatia, veja como na figura abaixo:

fig1_9

Clicando nessa ferramenta, a fatia ficará oculta e ai você já pode mudar a seta para a esquerda; dê um duplo clique sobre ela, apague o sinal de > e coloque o sinal de <, ative novamente a visualização das fatias e exporte-a, assim como foi feito com a primeira. Dessa maneira,  teremos os botões necessários para o nosso documento. A partir desse ponto passaremos a trabalhar novamente no desenvolvimento de nosso slideshow, acompanhe!

Abra o seu arquivo que foi criado na primeira parte do Post e vamos trabalhar agora os comportamentos de nossos botões de ação.

Com o notepad++ ou o editor de códigos de sua preferência, passaremos a colocar a velocidade das transições e o tempo de saída de cada imagem, veja na figura abaixo:

fig2_0

Nota: na linha 10 do nosso código podemos ver o tempo das transições do slide. Na linha 11 temos o tempo que levará para sair de uma imagem e ir para a próxima, ou seja, o tempo de saída. Esses números podem ser mudados de acordo com sua preferência, mas lembre-se: quanto menor o número, mais rápido ficará a transição (dica: deixe o timeout um pouco mais demorado, o resultado é melhor).

Para inserir os nossos botões de ação que criamos no Fireworks, iremos inserir as tags img,  e em cada tag img colocaremos uma classe. A primeira será chamada de prev (anterior) e a segunda de next (próxima), e serão inseridas logo abaixo da div slide, veja Fig 2.1.

fig2_1

Sua imagem já está inserida, agora aplicaremos uma formatação nas imagens através das CSS usando as classes prev e next como seletores, veja o código:

fig2_2

Confira como está o resultado de nosso trabalho até o momento no navegador:

fig2_3

Agora que já viu como o nosso slideshow está aparecendo, iremos atribuir os comportamentos nos botões. Insira o seguinte código na seção Javascript do documento:

fig2_4

Obs.: cada comando atribuído no nosso código acima esta sendo separado por vírgula, agora temos prev para voltar e next para avançar o slide. Repare o nome da classe entre aspas simples, (lembre-se: uma classe é identificada com um ponto(.) em frente ao nome, caso fosse um id usaríamos o sinal de sharp #).

Veja que os nomes dados às classes quando inserimos as imagens (fig 2.1) são os mesmos usados entre aspas simples no código da fig 2.4.

Legenda

Inserir uma legenda é extremamente fácil, usaremos a tag de parágrafo para tal finalidade. Depois de cada imagem, colocaremos um parágrafo. Veja como:

fig2_5

Nota: perceba que depois da primeira imagem foi dado um clique e na linha debaixo foi colocado um parágrafo, somente para não deixar o nosso código confuso. Note que o nosso parágrafo está dentro da tag li .

Como inserimos mais um elemento (no caso, o parágrafo), precisaremos mudar a altura da div, visto que o texto também ocupará um espaço dentro dela.

fig2_6

Na seção CSS na linha de código onde temos a altura, mudaremos de 300 para 360px, este espaço será o suficiente para o parágrafo que foi inserido. Continue e insira um parágrafo depois de cada imagem.

Observação: somente o número da legenda foi modificado, os textos são os mesmos, mas fique a vontade para mudá-los também. Veja um exemplo do resultado até agora:

fig2_7

Veja que cada seta indica que depois das imagens estão sendo inseridos os parágrafos.

Dica: Depois de cada imagem pressione a tecla Enter, só para deixar o seu código um pouco mais organizado. Salve o seu arquivo e visualize o resultado:

final

Espero que tenha curtido o tutorial até agora! Aguarde a terceira parte do nosso artigo, onde finalizaremos o nosso Slideshow com jCycle. O resultado é surpreendente e vale muito a pena, podem acreditar!

Comentem, curtam e divulguem, sua divulgação é o incentivo para a criação de novos artigos aqui no Blog do Web Design!

Próximo

Postado por

Tenho 29 anos, fiz vários cursos na área de informática dentre os quais me identifiquei muito com Web Design, em especial a programação que trata a parte do raciocínio lógico por trás de todos os sites e programas, atualmente estou fazendo faculdade de Sistema de Informação e estudando modelagem 3D. Leciono na Microcamp de Praia Grande no curso de Web desde de 2010.

Postagem Relacionada

jkit
jQuery jKit: A revolução no Front-End
jQuery jKit Hoje eu venho falar de um plug-in incrível do Jquery: o super útil JKit!!