Habbirata • 16.04.12 19:17
Fazendo um slide JQuery & JCycle 16.04.12 19:17
I ae gente, sou eu criador do Habbirata Tv. Vou ensinar um pouco mais de meus conhecimentos.
Bom, eu resumi muito tudo isso para não ficar um Tutorial chato ou cansativo.
@Começando
-Crie uma pasta em seu servidor com o nome de Slide.
-Dentro da pasta crie outra pasta chamada images.
-Pronto, agora vamos começar a fazer nossa Script. Vamos criar o arquivo chamado index.php
-Eu já hospedei todos os cs no meu servidor para desocupar espaço em seu servidor e ficar mais fácil.
Bom, dentro da index coloque esse código:
Bom, agora vamos editar conforme as dimensões de seu site:
As partes que você deve editar:
{width: ALTURApx; height:LARGURApx;}
Essa parte você deve editar em pixel's, você pode usar outras dimensões como: cm, mse, mil e etc. Prefiro px é mais fácil de editar e da menos lag.
Essa é a dimensão completa do slide. Se você separo um espaço de 500X500px em seu site coloque 500 em altura e 500 em largura, sendo que: você deve almentar +ou- 10px por causa da paginação do slide. (Próximo e Anterior).
<li><a href=" LINK "><img src=" IMAGEM " alt="" /></a></li>
Bom, ai é onde acontece a mágica das imagens, ai é um código simples de Html que muita gente deve conhecer. Para edita-lo coloque em LINK o link que você queira que seja seguido ao clicar naquela imagem do Slide. Se você não quiser por link no Slide apara a palavra LINK e coloque um link sego, ou seja: #
Ex: <li><a href="#"><img src=" IMAGEM " alt="" /></a></li>
Agora editando a imagem, nessa parte agente vai usar os arquivos da pasta IMAGES, smepre que você quiser por uma imagem coloca sempre número.
Como assim? Para ficar mais fácil para saber a ordem das imagens no slide agente coloca numeros nos nomes das imagens. Ex: 01.png, 02.png, 03.png, 04.png e etc.
Depois de ter se organizado ter que lembrar que todas as imagens devem estar do mesmo tamanho que o slide.
Depois disso coloque no link da imagem: images/NOMEDAIMAGEM.png
Para adicionar mais imagens é so você copiar aquela Tag:
<li><a href=" LINK "><img src=" IMAGEM " alt="" /></a></li>
E colar, exemplo eu quero 5 imagens no meu slide, eu faço isso:
<li><a href=" LINK "><img src=" IMAGEM 01 " alt="" /></a></li>
<li><a href=" LINK "><img src=" IMAGEM 02 " alt="" /></a></li>
<li><a href=" LINK "><img src=" IMAGEM 03 " alt="" /></a></li>
<li><a href=" LINK "><img src=" IMAGEM 04 " alt="" /></a></li>
<li><a href=" LINK "><img src=" IMAGEM 05 " alt="" /></a></li>
Depois de ter feito isso o Slide ta pronto. Agora vamos coloca-lo no site.
Eu uso iFrame que é bem mais fácil pra editar dps.
Vai na parte em que você deseja colocar o slide e ponha esse código:
<iframe frameborder='0' height=' ALTURA DO SLIDE ' marginheight='0' marginwidth='0' scrolling='No' src='./slide/' width=' LARGURA DO SLIDE '></iframe>
Editando ALTURA e LARGURA conforme a dimensão do slide.
Pronto. Atualize sua página e veja seu slide Funcionando.
@Créditos
-Eu Habbirata (Umberto Junior)
-jCyle
-jQuery
(Qualquer error no Tutorial me avise! Fiz na maior boa vontade só para vocês da Power Pixel. :lol: )
Atenção: Se vim neguim copiando essa Porr@ e não colocar crédito juro q não fasso mais Tutorial!!!
Bom, eu resumi muito tudo isso para não ficar um Tutorial chato ou cansativo.
@Começando
-Crie uma pasta em seu servidor com o nome de Slide.
-Dentro da pasta crie outra pasta chamada images.
-Pronto, agora vamos começar a fazer nossa Script. Vamos criar o arquivo chamado index.php
-Eu já hospedei todos os cs no meu servidor para desocupar espaço em seu servidor e ficar mais fácil.
Bom, dentro da index coloque esse código:
- Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slide</title>
<style type="text/css">
*{margin:0; padding:0;}
#destaques{width: ALTURApx; height:LARGURApx;}
#destaques ul{list-style:none;}
.paginacao a{padding:3px; border:1px solid #333; text-decoration:none;
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333; margin:5px 2px;}
.paginacao a:hover{background:#C4FFFF;}
</style>
</head>
<script type="text/javascript" src="http://junior.habbirata.heliohost.org/jquery.js" /></script>
<script type="text/javascript" src="http://junior.habbirata.heliohost.org/cycle.js" /></script>
<script type="text/javascript">
$(function(){
$('#destaques ul').cycle({
fx: 'shuffle',
speed: 2000,
timeout: 5000,
next: '#proximo',
prev: '#anterior',
})
})
</script>
<body>
<div class="paginacao">
<a href="#" id="anterior">Anterior</a>
<a href="#" id="proximo">Próximo</a>
</div><!--paginacao-->
<div id="destaques"><!--Imagens do Slide-->
<ul>
<li><a href=" LINK "><img src=" IMAGEM " alt="" /></a></li>
</ul>
</div><!--Fim das Imagens do Slide-->
</body>
</html>
Bom, agora vamos editar conforme as dimensões de seu site:
As partes que você deve editar:
{width: ALTURApx; height:LARGURApx;}
Essa parte você deve editar em pixel's, você pode usar outras dimensões como: cm, mse, mil e etc. Prefiro px é mais fácil de editar e da menos lag.
Essa é a dimensão completa do slide. Se você separo um espaço de 500X500px em seu site coloque 500 em altura e 500 em largura, sendo que: você deve almentar +ou- 10px por causa da paginação do slide. (Próximo e Anterior).
<li><a href=" LINK "><img src=" IMAGEM " alt="" /></a></li>
Bom, ai é onde acontece a mágica das imagens, ai é um código simples de Html que muita gente deve conhecer. Para edita-lo coloque em LINK o link que você queira que seja seguido ao clicar naquela imagem do Slide. Se você não quiser por link no Slide apara a palavra LINK e coloque um link sego, ou seja: #
Ex: <li><a href="#"><img src=" IMAGEM " alt="" /></a></li>
Agora editando a imagem, nessa parte agente vai usar os arquivos da pasta IMAGES, smepre que você quiser por uma imagem coloca sempre número.
Como assim? Para ficar mais fácil para saber a ordem das imagens no slide agente coloca numeros nos nomes das imagens. Ex: 01.png, 02.png, 03.png, 04.png e etc.
Depois de ter se organizado ter que lembrar que todas as imagens devem estar do mesmo tamanho que o slide.
Depois disso coloque no link da imagem: images/NOMEDAIMAGEM.png
Para adicionar mais imagens é so você copiar aquela Tag:
<li><a href=" LINK "><img src=" IMAGEM " alt="" /></a></li>
E colar, exemplo eu quero 5 imagens no meu slide, eu faço isso:
<li><a href=" LINK "><img src=" IMAGEM 01 " alt="" /></a></li>
<li><a href=" LINK "><img src=" IMAGEM 02 " alt="" /></a></li>
<li><a href=" LINK "><img src=" IMAGEM 03 " alt="" /></a></li>
<li><a href=" LINK "><img src=" IMAGEM 04 " alt="" /></a></li>
<li><a href=" LINK "><img src=" IMAGEM 05 " alt="" /></a></li>
Depois de ter feito isso o Slide ta pronto. Agora vamos coloca-lo no site.
Eu uso iFrame que é bem mais fácil pra editar dps.
Vai na parte em que você deseja colocar o slide e ponha esse código:
<iframe frameborder='0' height=' ALTURA DO SLIDE ' marginheight='0' marginwidth='0' scrolling='No' src='./slide/' width=' LARGURA DO SLIDE '></iframe>
Editando ALTURA e LARGURA conforme a dimensão do slide.
Pronto. Atualize sua página e veja seu slide Funcionando.
@Créditos
-Eu Habbirata (Umberto Junior)
-jCyle
-jQuery
(Qualquer error no Tutorial me avise! Fiz na maior boa vontade só para vocês da Power Pixel. :lol: )
Atenção: Se vim neguim copiando essa Porr@ e não colocar crédito juro q não fasso mais Tutorial!!!
-Desconectado- • 16.04.12 20:46
mkpkmaluco • 17.04.12 12:58
