Álbum de fotos
Olá pessoal!
Após responder a dúvida de um usuário do fórum de Java Script, resolvi criar um pequeno álbum de fotos com função de pré-carregamento de imagens. Testei no IE e FF e está tudo ok.
Características do projeto:
1. Pré-carregamento de imagens » As imagens só aparecem de depois de carregadas. Além disso, a função para aumento do zoom das imagens só poderá ser chamada após as imagens estarem exibidas na tela. Caso contrário não acontece nada.
Outro fato é importante que aparece uma mensagem de "carregando...", para que o usuário saiba que algo está por vir, caso as imagens sejam muito pesadas.
2. Implementação de CSS para maior flexibilidade do código;
3. Possibilidade de adição de quantas fotos necessário, bastando para isso apenas repetir o modelo das tabelas dos tumbnails e acrescentar os arrays com os links das imagens.
Segue o código:
<html>
<head>
<title>Álbum de fotos</title>
<style type="text/css"></style>
<script type="text/javascript">var imagem = new Array();var carregar = new Array();
function carregarImagens() {
for (var i=0; i<imagem.length; i++) {
carregar[i] = new Image();
carregar[i].src = imagem[i];
document.getElementById("imgQuadro").innerHTML = "Carregando...";
document.getElementById("imgTumb"+i).innerHTML = "Carregando...";
window.setTimeout("verificaCarregamento("+i+")",100);
}
}
function verificaCarregamento(imgID) {
if(carregar[imgID].complete ) {
document.getElementById("imgTumb"+imgID).innerHTML = '<img src="'+carregar[imgID].src+'" width="120" height="90" onClick=abrirImagem('+imgID+')>';
if (imgID == 0) {
document.getElementById("imgQuadro").innerHTML = '<img width="400" height="300" id="imgQuadro" src="'+imagem[imgID]+'">';
}
}else{
window.setTimeout("verificaCarregamento("+imgID+")", 100);
}
}
function abrirImagem(imgID) {
document.getElementById("imgQuadro").innerHTML = '<img width="400" height="300" id="imgQuadro" src="'+imagem[imgID]+'">';
}
window.onload = carregarImagens;
</script>
</head>
<body>
<center>
<table border="1" width="400" height="300">
<tr>
<td align="center"><div id="imgQuadro"></div></td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="tumbnails"><div id="imgTumb0" class="tumbnails"></div></td>
<td class="tumbnails"><div id="imgTumb1" class="tumbnails"></div></td>
<td class="tumbnails"><div id="imgTumb2" class="tumbnails"></div></td>
<td class="tumbnails"><div id="imgTumb3" class="tumbnails"></div></td>
<td class="tumbnails"><div id="imgTumb4" class="tumbnails"></div></td>
</tr>
</table>
<table border="1">
<tr>
<td class="tumbnails"><div id="imgTumb5" class="tumbnails"></div></td>
<td class="tumbnails"><div id="imgTumb6" class="tumbnails"></div></td>
<td class="tumbnails"><div id="imgTumb7" class="tumbnails"></div></td>
<td class="tumbnails"><div id="imgTumb8" class="tumbnails"></div></td>
<td class="tumbnails"><div id="imgTumb9" class="tumbnails"></div></td>
</tr>
</table>
</center>
</body>
</html>Discussão (10)
Carregando comentários...