Boa noite ae!
Bom agora aqui colocando um elemento gráfico que é bem útil e tbm bastante usado.
É uma galeria até que básica bastante funcional e fácil de fazer ela tem um slider para os thumbs e a foto aparece em uma div acima, nessa galeria você vai precisar de ter uma imagem com o tamanho que você quer mostrar e ela em um tamanho menor caso você não queira perder qualidade e perder um pouco de performance pq redimensionar uma imagem no html não é muito aconselhavel.
Esta é a imagem da galeria
bom primeiro vamos a estrutura do html
<div id=”imagens”>//Div para pré carregar as imagens grandes
<img src=”1.jpg” />
<img src=”2.jpg” />
<img src=”3.jpg” />
</div>
<div id=”root”>
<div id=”mostra-foto”>//Div que mostra as imagens
</div>
<div id=”info”>//Div que vai receber o texto
<div id=”texto-info”>//Div para o texto receber um padding
</div>
</div>
<div id=”seta-esq”>//Div da seta esquerda que movimenta o slider
<img src=”imgsgaleria/seta-esq.gif” />
</div>
<div id=”caixa-slider”>
<div id=”fundo-slider”>
<div class=”parte-slider”> //Divs com as caixas do slider aqui temos 3 caixas mais é só repetir esta div que você terá quantas precisar
<img src=”imgsgaleria/1-mini.jpg” alt=”arte japonesa bem bonita” /> //Thumb da imagem 1 com alt que vai aparecer no box de texto
</div>
<div class=”parte-slider”>
<img src=”imgsgaleria/2-mini.jpg” alt=”minhas aventuras com modelagem” />
</div>
<div class=”parte-slider”>
<img src=”imgsgaleria/3-mini.jpg” alt=”peão de obra” />
</div>
</div>
</div>
<div id=”seta-dir”> //Div da seta direita
<img src=”imgsgaleria/seta-dir.gif” />
</div>
</div>
agora o css
html,body{//Zerar o padding o margin e colocar uma fonte
margin:0;
padding:0;
font-family:tahoma;
color:#000;
}
#root{ //Div que vai servir para suportar td o conteudo
height:auto;
width:600px;
margin:10px auto;
}
#mostra-foto{//Caixa que mostra a foto com a altura minima de 500px
width:600px;
float:left;
overflow:hidden;
text-align:center;
min-height:500px;
}
#caixa-slider{//Caixa do slider
margin:10px 0 0 0;
height:70px;
width:500px;
float:left;
overflow:hidden;
}
#seta-esq,#seta-dir{//Div das setas
height:70px;
width:50px;
float:left;
margin:10px 0 0 0;
}
#fundo-slider{//Div que recebe td o slider
width:auto;
height:70px;
}
.parte-slider{//Caixas do slider
width:auto;
height:70px;
margin:0 6px;
float:left;
}
.parte-slider img,#seta-esq img,#seta-dir img{//Para deixar o ponteiro do mouse diferente nas setas e nas caixas do slider
cursor:pointer;
}
#info{//Caixa que vai receber o texto
height:50px;
width:600px;
float:left;
margin:-50px 0 0 0;
background:#555;
}
#texto-info{//Aqui vai o texto com um padding
color:#fff;
padding:10px;
font-weight:bold;
}
#imagens{//Caixa para précarregar as imagens aqui ela não aparece
display:none;
}
e por fim o jquery
$(function(){
var src=”";//Variaveis que vão receber o caminho, tratar o caminho, o texto que vai na caixa de informação, contar as partes do slider e a que vai receber o tamanho máximo do slider respectivamente;
var src2;
var alt;
var i=0;
var max;
$(“#fundo-slider”).find(“.parte-slider”).each(function(){ //Aqui ele conta as partes do slider
i++;
});
max=(i*70)-70;//Aqui ele deixa o maximo do slider menos 1 parte do slider
$(“#info”).fadeTo(-500,0.5); //dá uma esmaecida na caixa de informação
$(“#mostra-foto”).html(“<img src=’imgsgaleria/1.jpg’ />”);//Deixa a primeira imagem carregada na caixa que mostra a foto
$(“#texto-info”).text(“arte japonesa bem bonita”);//Deixa o alt da primeira imagem carregada na caixa de informação
$(“.parte-slider img”).click(function(){ //Evento de clicar na imagem
alt = $(this).attr(“alt”); //Recebe o texto da imagem
src=$(this).attr(“src”); //recebe o caminho da imagem
src2=src.split(“-”); //Divide o caminho da imagem para tirar o mini que significa que ela é um thumb
$(“#info”).animate({“marginTop”:”0px”,”height”:”0px”},500,function(){//Aqui ele faz o movimento de esconder a caixa de informação, colocar o texto na caixa e carregar a imagem grande tudo como callback
$(“#texto-info”).text(alt);
$(“#mostra-foto”).html(“<img src=’”+src2[0]+”.jpg’ />”);
});
$(“#info”).animate({“marginTop”:”-50px”,”height”:”50px”},500); //Aqui ele faz a caixa de texto aparecer novamente
});
$(“#seta-dir img”).click(function(){ //Movimentação do slider
if ($(“#fundo-slider”).css(“marginLeft”) != “-”+max+”px”){ //Se a posição estiver diferente do máximo permitido ele movimenta
$(“#fundo-slider”).animate({“marginLeft”:”-=70px”},500);
}
});
$(“#seta-esq img”).click(function(){ //Movimentação do slider
if ($(“#fundo-slider”).css(“marginLeft”) != “0px”){//Se a posição estiver diferente do minimo permitido ele movimenta
$(“#fundo-slider”).animate({“marginLeft”:”+=70px”},500);
}
});
});
Até mais rapaziada.
