Galeria de Fotos Javascript

Galeria de Fotos

Conteúdo

E aí pessoal, tudo bom??

Antes de tudo quero me apresentar, sou Eughenio Constantino e estou muito feliz em poder escrever aqui no mxstudio.

Como esse é meu primeiro artigo farei algo bem simples de como o XHTML, o CSS e o Javascript pode nos ajudar no dia a dia.

Você já deve ter enfrentado de publicar lado a lado mais do que 50 fotos para uma galeria de fotos usando tabela e aquela infinidade de células, se não teve ainda esse confronto ótimo, aqui você já se prepara para isso.

Vamos lá, você precisa tratar as imagens no tamanho que você quiser, eu costumo utilizar elas no tamanho de 150 x 113 px e renomea-las num padrão: prefixo + sufixo numérico.extensão, exemplo: foto_01.jpg ou fotoPeq01.gif (sempre utilizando o zero na frete do número que for menor que dez e sempre iniciamos as fotos com o número 1).

Vamos começar com o código javascript, ele que monta a lista automaticamente das fotos para nós.

<script type=”text/javascript”>
/*
Nossa função chama publicaFotos e nela passamos os parâmetros:
mDiv – A div que ficará nossas fotos;
nFotosLinha – Número de fotos por linha;
nTotalFotos – Número total de fotos na pasta;
prefFotos – Prefixo das fotos (lembre do nosso padrão de nomeclatura: foto_01.jpg);
pastaFotos – Endereço da pasta onde estão as fotos.
extensao – A extensão que utilizamos nas fotos.
*/

function publicaFotos(mDiv, nFotosLinha, nTotalFotos, prefFotos, pastaFotos, extensao){
//É na variável _images onde guardaremos todo o nosso código da lista de fotos.
var _images = ”;

//Aqui iniciamos o laço de repetição onde a variável “x” será nosso contador para o número total de fotos.
for(var x = 1; x <= nTotalFotos; x++){

//Aqui abrimos a <ul> da nossa galeria de fotos
_images +=”<ul>”;

//Aqui iniciamos o laço de repetição para gerar as fotos que ficarão lado a lado.
for(y = 1; y <= nFotosLinha; y++){

//A variável fot vira nosso sufixo das fotos.
fot = x + (y-1);

//Aqui verificamos se nosso sufixo é menor que dez caso seja coloca o zero na frente.
if(fot < 10){
fot = “0″+fot;
}

//Aqui temos uma condição de que caso o número do nosso sufixo seja menor que a quantidade de fotos ele não coloca mais a tag <li> com os parâmetros das fotos.
if(fot <= nTotalFotos){
_images += “<li><img src=’”+ pastaFotos + prefFotos + fot + “.” + extensao +”‘ /></li>”;
}else{
return false;
}
}

//Caso o nosso sufixo seja maior que a quantidade de fotos por linha, ele fecha o <ul>
_images +=”</ul>”;

//Voltamos o x para o último número do sufixo e voltamos para o primeiro laço de repetição para gerarmos mais uma linha de fotos.
x = fot;
}

//Aqui publicamos em nossa div todo código pronto da nossa galeria.
document.getElementById(mDiv).innerHTML = _images ;
}
</script>

O css que utilizamos é simples e básico ele somente deixará os <li> lado a lado:

#mfotos ul li{
display:inline;
padding:4px;
}

Pronto temos uma galeria de fotos em XHTML e validada pelo W3C.

Como tudo que faço, eu testo, para quem quiser segue os arquivos zipado desse artigo.

Bom espero que gostem e dêem sugestões para os próximos.

Autor: Eughenio Constantino- Colunista Web Standards do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.