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 1

capa

Neste tutorial você irá companhar o passo a passo para criar um incrível slideshow cheio de efeitos utilizando um 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!

Olá amigo leitor! Se você acompanha os posts do blog do Web design deve lembrar do texto que escrevi sobre JQuery (e se você não lembra ou não viu, poderá conferir aqui). Nele, expliquei a importância do JQuery no web design atual e também sobre a sua praticidade de uso. É importante que o leia antes de continuar. Se já o fez anteriormente, poderá ter um bom entendimento do que virá a seguir. Vamos começar?

Para o nosso tutorial, vamos utilizar o plugin jQuery. Você pode baixá-lo no link  http://jquery.com. Em seguida, clique no botão jQuery (fig. 1).

Baixar jquery

Você será direcionado para uma nova página onde poderá escolher qual opção do plugin deseja baixar. Sugiro a versão não compactada ( fig1.1) e em seguida clique no link em destaque.

fig1_1

Após clicar no link, surgirá uma outra página ( fig 1.2).

fig1_2

Nesta página, salve o conteúdo usando control + S, e na janela que abrirá para você salvar o plugin, dê um nome mais simples e clique em Salvar. Assim, ficará mais fácil na hora de incorporar os códigos na sua página html.

fig1_3

Agora, vamos baixar o plugin jCycle no site http://jquery.malsup.com/cycle.

Dica: salve tanto o plugin jQuery quanto o Cycle em uma pasta com o nome do nosso artigo, somente para facilitar a memorização e o nosso aprendizado, crie uma pasta e coloque o nome cycle; nesta pasta também salvaremos o arquivo html. Lembre-se: com todos os arquivos que iremos usar ocupando a mesma pasta, todo o nosso trabalho ficará mais fácil, ok?

fig1_4

Após clicar no link, surgirá a página com as opções para baixar o plugin. Clique na opção indicada pela seta.

fig1_5

Ao chegar à página com todos os códigos do plugin Cycle, use as teclas de atalho para salvar o plugin, de maneira semelhante ao jQuery (fig 1.3 e 1.4).

Antes de começarmos, baixe 5 imagens e salve-as dentro da pasta que criamos nos passos anteriores. Essas imagens serão utilizadas em nosso slideshow. Feito isso, podemos começar o nosso trabalho!

Abra o seu editor de códigos favorito como o Dreamweaver ou o Notepad++ e digite o seguinte código html:

fig1_6

Após digitar a sintaxe html, salve o documento dentro da pasta cycle com o nome de slideshow.html. Detalhe: nosso título faz referência ao nosso artigo.

Após a linha 5 vamos criar uma div que vai abrigar o nosso slideshow, com o id=”slide”. Veja figura abaixo:

fig1_7

Crie uma lista não-ordenada e liste todas as imagens que serão usadas no nosso exemplo, como na imagem a seguir:

fig1_8

Todas as imagens ficarão uma embaixo da outra e em seu tamanho original. Em seguida,  vamos trabalhar o tamanho delas: para isso, depois da linha 3, dê um bom espaço e inicie a seção CSS para colocar os códigos de formatação (figura 1.9).

fig1_9

Vamos atribuir um tamanho igual em CSS para cada imagem. O seletor usado será img, lembrando que qualquer tag html serve de seletor em CSS.

fig2Dica: salve o seu arquivo novamente, sempre que fizer qualquer alteração significativa, e teste em seu navegador. O resultado até aqui será semelhante ao da figura abaixo:

fig2_1

Voltando para o seu editor de códigos preferido, vamos trabalhar o estilo de lista que vemos nas imagens. O seletor que irá receber a estilização agora é ul. Com isto, retiramos o estilo de lista que existia anteriormente:

fig2_2

Agora trabalhe a estilização da div. Seu id é slide.

fig2_3

Obs.: um id também serve de seletor CSS, neste caso, para identificá-lo, usamos o sinal de sharp (#) na frente do nome do id (como você verá na linha 9); coloque a mesma largura (width) e altura (height) que aplicamos nas imagens. A propriedade overflow serve para que os elementos dentro da div não ultrapassem  seu limite, e o valor hidden significa que todos os elementos dentro da div não serão exibidos, a não ser uma imagem, já que o tamanho da div é igual a largura e altura da imagem, as outras ficam escondidas.

Veja o resultado:

fig2_4

A partir de agora vamos incluir os arquivos jQuery e Cycle no nosso documento. Veja a seguir como fazer isso:

fig2_5

Observe que o código foi incluído na seção head do nosso documento.Na propriedade src, dentro das aspas duplas, temos o nome dos arquivos, então lembre-se, caso tenha colocado um outro nome, use esse nome seguido do .js .

Ainda na seção head, abra um espaço abaixo dos arquivos jQuery e Cycle para editarmos os códigos javascript com uso dos plugins incluídos.

fig2_6

Dica: Aproveite e salve seu arquivo.

Agora, vamos fazer funcionar o nosso slideshow. Insira os seguintes códigos na seção javascript como se vê na figura abaixo:

fig2_7

Nota: O sinal de cifrão é usado com o jQuery para selecionar qualquer elemento ou dar inicio a uma função (veja a primeira seta). A segunda seta indica como estaremos usando o nosso seletor de id seguido da terceira seta que é a do seletor de lista não ordenada, o qual foi colocado depois de um espaço. A quarta seta mostra como estaremos fazendo uso do plugin Cycle seguido de abre e fecha parênteses. Dentro desses parênteses, temos um abre e fecha chaves, onde colocamos as instruções de uso do plugin.

Se tudo foi corretamente executado conforme mostrado aqui, o efeito até o momento será como o da figura abaixo:

finalNosso slideshow está criado; acompanhe em breve a continuação deste artigo no qual estarei falando sobre outras opções de uso do plugin Cycle e também sobre como melhorar sua apresentação.

Espero que tenham gostado desse tutorial, em caso afirmativo, deixe o seu Curtir e também Compartilhe o Blog do Web Design com seus amigos! Para dar sugestões de novos posts, fazer observações ou tirar alguma dúvida, utilize o campo de comentários abaixo. Até a publicação da segunda parte!

Código completo do tutorial:

<html>
<head>
<title>Plugin cycle - slideshow</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cycle.js"></script>
<script type="text/javascript">
$(function(){
            $('#slide ul').cycle({
                        fx:'fade',
            });
});

</script>

<style type="text/css">
img{
width:500px;height:300px;
}
ul{list-style:none;}
#slide{width:500px;height:300px;overflow:hidden;}
</style>
</head>
<body>
            <div id="slide">
                        <ul>
                                   <li><img src="imagem.jpg"></li>
                                   <li><img src="imagem2.jpg"></li>
                                   <li><img src="imagem3.jpg"></li>
                                   <li><img src="imagem4.jpg"></li>
                                   <li><img src="imagem5.jpg"></li>
                        </ul>
            </div>
</body>
</html>
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!!