Curso Web Design | Crie um Slideshow com jCycle – parte 2

---

Crie um Slideshow com jCycle – parte 2 Posted: 19 Sep 2013 05:43 AM PDT 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.blogwebdesign.microcampsp.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). Em seguida, na tela de configuração do novo documento, coloque 45 pixels para a largura, 45 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. Agora, com o documento em branco aberto em sua tela, selecione a ferramenta retângulo na barra de ferramentas do programa. 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): Na sequência, novamente na barra de ferramentas lateral, selecione a ferramenta de Texto. 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: 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: 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. 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: 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: 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. 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: Confira como está o resultado de nosso trabalho até o momento no navegador: 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: 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: 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. 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: 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: 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!

You are subscribed to email updates from Blog do Curso Web Design - Microcamp SP To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610