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 3 (final)

capa post jquery cycle parte 3

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:

Html criado com uma div, uma lista não ordenada, imagens e paragráfos

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:

seção CSS contendo a estilização do slideshow

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:

seção javascript contendo o script para o funcionamento do plugin cycle

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

tag que vai exibir o pager

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.

linha de código responsável pelo pager

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:

conferindo o resultado parcial do trabalho

Para estilizar via CSS confira o código abaixo:

estilização do pager

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:

final do trabalho

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!

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!!