Curso Web Design | Crie um Slideshow com jCycle – parte 3 (final)

---

Crie um Slideshow com jCycle – parte 3 (final) Posted: 17 Jul 2014 07:57 AM PDT Olá amigo leitor! Se você acompanha os posts do blog de Web Design deve lembrar que publicamos um tutorial em 03 partes sobre o plugin chamado jQuery Cycle, também conhecido como jCycle. Esse plugin é muito utilizado para diversos tipos de efeitos de transição de imagens e o resultado torna o slideshow do seu site muito mais bonito e atrativo! Neste post, eu trago para vocês a etapa final do passo-a-passo para desenvolver esse tipo de trabalho. Importante: como mencionei acima, este tutorial é a terceira parte de um total de três publicados aqui no blog. Se você ainda não leu a primeira ou a segunda parte, recomendo que o faça para uma compreensão completa do que está sendo desenvolvido. Você pode fazer isso clicando nos links a seguir: http://blogwebdesign.microcampsp.com.br/crie-um-slideshow-com-jcycle-parte-1 http://blogwebdesign.microcampsp.com.br/crie-um-slideshow-com-jcycle-parte-2 Antes de desenvolvermos a ultima parte vamos dar uma pequena recapitulada, acompanhe com atenção o que foi desenvolvido até agora: 1 – Html criado com uma div, uma lista não ordenada, imagens e parágrafos (que serão as legendas das imagens), veja figura abaixo: Observação: Todas as imagens estão dentro de uma pasta onde também se encontram os arquivos: jquery.js e o jquery.cycle.js (que é o nome do arquivo jcycle, mas você pode alterar esse nome para facilitar o endereçamento do link). 2 – Uma seção CSS contendo a estilização do slideshow, veja abaixo: Obs: a linha 21 contém a largura e altura de todas as imagens, a linha 24 possui a largura e altura da div slide, ela tem um pouco mais de altura para evitar que o botão ocupe a mesma posição das legendas, visto que se fosse deixado com a mesma altura a legenda ficaria colada aos botões prev e next. 3 – Uma seção javascript contendo o script para o funcionamento do plugin cycle, isso foi visto na segunda parte do tutorial, veja a figura abaixo: Após essa revisão dos arquivos que criamos nos posts anteriores, vamos inserir o "Pager" que vai marcar o final do nosso artigo "Slideshow com jCycle". Mas o que é o Pager? O Pager é como chamamos a numeração das imagens que compõem o slideshow. Para iniciarmos a sua criação, vamos inserir a tag que vai exibi-lo. Usaremos a tag span, isso não te impede de usar uma tag de paragrafo ou div… A tag span por si só não serve de nada neste exemplo, por isso criei uma classe e dei a ela o nome de pager. É por meio da classe que a paginação será configurada. Mas vamos prosseguir… Na seção javascript, onde estamos trabalhando o plugin cycle vamos inserir mais uma linha de código e ela será a grande responsável pelo pager. Observe a linha 14 do nosso código, o nome entre aspas simples é o mesmo que demos para a classe ao usar a tag span. Depois de colocar essa linha, o pager já estará funcionando, o que precisamos fazer agora é melhorar o aspecto visual do mesmo. Faremos isso na seção CSS,  mas antes vamos conferir o resultado parcial do nosso trabalho: Para estilizar via CSS confira o código abaixo: Explicação: O pager cria links dentro da tag span , por isso o elemento-alvo da formatação CSS é o a, agora se for em uma página de um site, para evitar que essa formatação se aplique em todos os links, use a seguinte forma: .pager a{...} Na linha 30 foi aplicada uma borda com uma espessura 1, estilo solido e cor grafite. Na linha 31 foi aplicada uma margem á esquerda de 5 pixels, que faz com que haja uma distancia na esquerda de 5 pixels para cada link. Ainda na linha 31 foi aplicada uma distancia interna entre o numero do link e as linhas da borda, digo linha por que apliquei uma distancia de 5 pixels em cima e em baixo, e 10 pixels na esquerda e à direita. Na linha 32 apliquei um posicionamento ao link o que nos dá um controle melhor sobre como mexer em sua posição, usei relative, isso quer dizer que ele vai se posicionar a partir do botão ou seja, o botão vai ser a base desse posicionamento. Coloquei top com o valor -15pixels, isso fará com que o pager suba um pouco. Para finalizar, salve seu arquivo e veja como ficou: Eis o resultado! Com isso, nosso trabalho chega ao fim e o nosso tutorial em 03 partes está finalizado. Espero que tenha curtido muito fazer esse trabalho! Em breve estarei também escrevendo outros tutoriais, por isso não perca, continue acompanhando as postagens do blog! Um forte abraço e um muito obrigado pela atenção!

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