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

---

Crie um Slideshow com jCycle – parte 1 Posted: 08 Aug 2013 06:02 AM PDT 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). 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. Após clicar no link, surgirá uma outra página ( fig 1.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. 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? Após clicar no link, surgirá a página com as opções para baixar o plugin. Clique na opção indicada pela seta. 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: 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: Crie uma lista não-ordenada e liste todas as imagens que serão usadas no nosso exemplo, como na imagem a seguir: 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). 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. Dica: 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: 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: Agora trabalhe a estilização da div. Seu id é slide. 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: A partir de agora vamos incluir os arquivos jQuery e Cycle no nosso documento. Veja a seguir como fazer isso: 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. 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: 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: Nosso 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>

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