Álbum de fotos

klonder · Julho 17, 2009

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">
body {background-color:#000000; color:#FFFFFF; font-family:tahoma,arial,verdana; margin:5px;}
td.tumbnails {width:120; height:90; text-align:center}
div.tumbnails {font-size:11px;}
</style>
<script type="text/javascript">
//Código desenvolvido e testado por: Klonder.
//Postagem exclusiva em: www.forum.imasters.com.br

var imagem = new Array();
imagem[0] = "http://fc05.deviantart.com/fs20/f/2007/270/3/4/Balance_Wallpaper_by_nxxos.jpg";
imagem[1] = "http://www.papeldeparede.etc.br/wallpapers/paisagem-natural_3995_1280x800.jpg";
imagem[2] = "http://www.papeldeparede.etc.br/wallpapers/amigo-pinguin_3993_1024x768.jpg";
imagem[3] = "http://www.papeldeparede.etc.br/wallpapers/the-simpsons-ou-sopranos_3992_1024x768.jpg";
imagem[4] = "http://www.papeldeparede.etc.br/wallpapers/bart-e-skate_3976_1024x768.jpg";
imagem[5] = "http://www.papeldeparede.etc.br/wallpapers/_3988_1024x768.jpg";
imagem[6] = "http://www.papeldeparede.etc.br/wallpapers/homer-astronauta_3977_1024x768.jpg";
imagem[7] = "http://www.papeldeparede.etc.br/wallpapers/tigre-branco_3968_1024x768.jpg";
imagem[8] = "http://www.papeldeparede.etc.br/wallpapers/bicicleta-voadora_3840_1024x768.jpg";
imagem[9] = "http://www.papeldeparede.etc.br/wallpapers/gato-na-cama_3829_1024x768.jpg";

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>

William Bruno · Julho 17, 2009

Caraa.. que codigo lindo!!

Bacana mesmo! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

klonder · Julho 18, 2009

Caraa.. que codigo lindo!!

Bacana mesmo! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Pois é William Bruno, obrigado! Essa foi uma idéia que tive após responder a dúvida de um usuário e resolvi compartilhar com o pessoal aqui.

Outra idéia que tive há poucas horas foi atualizar o código acima, para uma versão mais interessante, com efeito de fade-in quando cada foto do Thumbnail for clicada.

Testei no IE e FF e está funcionando muito bem. Para quem quiser, o código está disponibilizado abaixo. Estou pensando em dar uma última atualizada para acrescentar mais alguns efeitos, mas não é certeza... a partir de agora minhas férias acabaram e meu tempo será curto!

Álbum de fotos, com pré-carregamento e efeito fade-in. Versão 2:

<html>
<head>
<title>Álbum de fotos</title>
<style type="text/css">
body {background-color:#000000; color:#FFFFFF; font-family:tahoma,arial,verdana; margin:5px;}
td.tumbnails {width:120; height:90; text-align:center}
div.tumbnails {font-size:11px;}
#tbQuadro {border:#888888 1px solid; width:400; height:300;}
</style>
<script type="text/javascript">
/*
Script desenvolvido por: klonder (klonder@ymail.com)
Data de criação: 17/07/2009
Modelo referência: Layout próprio (apenas para exemplo). Pode ser modificado conforme a necessidade de cada um.

Em caso de utilização, a fonte não precisa ser citada. No entanto, tenham respeito e não coloquem que o código é de sua autoria. A capacidade de respeitar o trabalho do outro mostra que tipo de indivíduo você realmente é.

Esse código foi postado em uma data que ficará armazenada no POST deste fórum com referência do autor original. Por favor, não postem em outros fóruns sem a permissão do autor.

Postagem exclusiva em: www.forum.imasters.com.br
*/
var imagem = new Array();

//Coloque o link das imagens aqui:
imagem[0] = "http://www.papeldeparede.etc.br/wallpapers/lisa-simpson_3978_1024x768.jpg";
imagem[1] = "http://www.papeldeparede.etc.br/wallpapers/paisagem-natural_3995_1280x800.jpg";
imagem[2] = "http://www.papeldeparede.etc.br/wallpapers/amigo-pinguin_3993_1024x768.jpg";
imagem[3] = "http://www.papeldeparede.etc.br/wallpapers/the-simpsons-ou-sopranos_3992_1024x768.jpg";
imagem[4] = "http://www.papeldeparede.etc.br/wallpapers/bart-e-skate_3976_1024x768.jpg";
imagem[5] = "http://www.papeldeparede.etc.br/wallpapers/_3988_1024x768.jpg";
imagem[6] = "http://www.papeldeparede.etc.br/wallpapers/homer-astronauta_3977_1024x768.jpg";
imagem[7] = "http://www.papeldeparede.etc.br/wallpapers/tigre-branco_3968_1024x768.jpg";
imagem[8] = "http://www.papeldeparede.etc.br/wallpapers/bicicleta-voadora_3840_1024x768.jpg";
imagem[9] = "http://www.papeldeparede.etc.br/wallpapers/gato-na-cama_3829_1024x768.jpg";

//Defina a velocidade de transição das imagens em milissegundos:
var velTransicao = 70;


var carregar = new Array();

//Função responsável por carregar as imagens com o evento onLoad();
function carregarImagens() {
var objQuadro1 = document.getElementById("imgQuadro1");
var objQuadro2 = document.getElementById("imgQuadro2");
var tbQuadro = document.getElementById("tbQuadro");

//Posicionando os spans na tela:
objQuadro1.style.left = tbQuadro.offsetLeft;
objQuadro1.style.top = tbQuadro.offsetTop;
objQuadro2.style.left = tbQuadro.offsetLeft;
objQuadro2.style.top = tbQuadro.offsetTop;
	
	//Carregando todas as imagens em um loop:
	for (var i=0; i<imagem.length; i++) {
		carregar[i] = new Image();
		carregar[i].src = imagem[i];
		document.getElementById("imgQuadro1").innerHTML = "Carregando...";
		document.getElementById("imgTumb"+i).innerHTML = "Carregando...";
		//Chamando a função verificaCarregamento a cada 100 ms para verificar se as imagens
		//foram carregadas ou não.
		window.setTimeout("verificaCarregamento("+i+")",100);
	}
}

//Função que verifica se as imagens foram carregadas ou não.
function verificaCarregamento(imgID) {
	//Se forem carregadas, o bloco abaixo será executado:
	if(carregar[imgID].complete) {
		document.getElementById("imgTumb"+imgID).innerHTML = '<img src="'+carregar[imgID].src+'" width="120" height="90" onClick=abrirImagem('+imgID+')>';
		//Se for a imagem[0], ela será colocada no quadro principal.
		if (imgID == 0) {
			document.getElementById("imgQuadro1").innerHTML = '<img width="400" height="300" id="imgQuadro" src="'+imagem[imgID]+'">';
		}
	//Se não foi carregada, chama a função novamente e refaz o teste de carregamento:
	}else{
		window.setTimeout("verificaCarregamento("+imgID+")", 100);
	}
}

//Criando uma variável-controle:
var iLoop = 2;
function abrirImagem(imgID) {
var objQuadro1 = document.getElementById("imgQuadro1");
var objQuadro2 = document.getElementById("imgQuadro2");

	if (iLoop == 2) {
	 	objQuadro1.style.zIndex = 1;
		objQuadro2.style.zIndex = 2;
		objQuadro2.style.opacity = '0';
		objQuadro2.style.filter = 'alpha(opacity="0")';
		objQuadro2.innerHTML = '<img width="400" height="300" id="imgQuadro" src="'+imagem[imgID]+'">';
			if(window.navigator.userAgent.indexOf("Firefox",0) != -1) {
				objQuadro2.style.display = "";
			}else{
				objQuadro2.style.display = "block";
			}
		efeito(iLoop);		
	}else{
		objQuadro1.style.zIndex = 2;
		objQuadro2.style.zIndex = 1;
		objQuadro1.style.opacity = '0';
		objQuadro1.style.filter = 'alpha(opacity="0")';
		objQuadro1.innerHTML = '<img width="400" height="300" id="imgQuadro" src="'+imagem[imgID]+'">';
			
			if(window.navigator.userAgent.indexOf("Firefox",0) != -1) {
				objQuadro1.style.display = "";
			}else{
				objQuadro1.style.display = "block";
			}
		efeito(iLoop);
	}
	
}

//Função que gera o efeito de transição entre os slides
var iFiltro = 0;
function efeito(imgID) {
var objQuadro1 = document.getElementById("imgQuadro1");
var objQuadro2 = document.getElementById("imgQuadro2");

	//Controle para as várias possibilidades do i:
	if (iFiltro > 100) {
		
		//clearInterval(tempEfeito); Retirei pois não havia necessidade para setTimeout();
		if (imgID == 2) {
			iLoop = 1;
			objQuadro1.style.display = "none";
		}else{
			iLoop = 2;
			objQuadro2.style.display = "none";
		}
		//Zerando o valor de iFiltro, pois ele poderá ser chamado novamente:
		iFiltro = 0;	
	}else{
		valorOpacidade = iFiltro/100;
		valorOpacidade = valorOpacidade.toString();
	 	//Controlando a opacidade das fotos:
		if (imgID == 1) {
			objQuadro1.style.opacity = valorOpacidade;
			objQuadro1.style.filter = "alpha(opacity='"+iFiltro+"')";
		}else{
			objQuadro2.style.opacity = valorOpacidade;
			objQuadro2.style.filter = "alpha(opacity='"+iFiltro+"')";
		}
	
	iFiltro+=10;
	tempEfeito = window.setTimeout('efeito('+imgID+')',velTransicao);
	}
}
//Iniciar o carregamento assim que a página for carregada:
window.onload = carregarImagens;
</script>
</head>

<body>
<center>
<table id="tbQuadro">
<tr>
	<td  align="center">
	<span id="imgQuadro1" style="display:block; position:absolute;"></span>
	<span id="imgQuadro2" style="display:none; position:absolute;"></span>
	</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>

Mário Monteiro · Julho 19, 2009

ótimo material mesmo klonder

Cajau · Setembro 21, 2009

Eu fico impressionado.. vcs são muito bons! Parabéns!

Anderson Narciso · Novembro 13, 2009

Orra que bixo galo! HAhuahua massa bagarai :)

Até adaptei para o carregamento de apenas uma imagem para o item "Empresa" de um site que estou fazendo, aonde geralmente coloca-se uma foto da empresa e funcionou perfeitamente, ainda mais por ser uma foto de qualidade e tamanho grande.

Créditos mantigos no código :)

Vlws mesmo!

11closed · Maio 31, 2010

bom muito bom adorei esse post

vlw klonder

t+

Miguel Rocha1 · Junho 17, 2010

amei

Paulo2015 · Março 29, 2015

Ola Klonder

Primeiramente gostaria de dar os parabéns pelo código

sou iniciante nisso e esse seu código me ajudou muito pra por álbum no meu blog

Mas só consigo por 10 fotos,

como faço para por mais fotos no álbum?

Maranhão · Abril 13, 2015

Olá, Klonder, primeiro parabéns pela postagem.

Cara você não imagina como esse código resolveu meu problema. Já estava quase desistindo de pesquisar na internet esse tipo de álbum de fotos. Eu copiei e colei num editor HTML, salvei e testei nos navegadores Firefox, Chrome, Opera e Explorer 8 e todos funcionarem perfeito.

Eu tentei quebrar o código em CSS e JavaScript mas não consegui de jeito nenhum. Teria como o amigo fazer isso e postar aqui pra gente. Se achar mais fácil compactar a pasta com os códigos e hospedar o arquivo zipado, e fornecer o link, desde já agradeço. Também se não for possível, mais uma vez parabéns. Um abraço

Frank_Gomes · Maio 3, 2015

Olá Klonder!

Estou tentando criar um aplicativo no intel xdk e utilizei seu código para criar o album de fotos e deu certo em uma pagina, porém, quando eu crio uma nova sub pagina e insiro o seu código ele não carrega as imagens. você poderia me ajudar?

Arquivado

Álbum de fotos

Recommended Posts

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mário Monteiro 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cajau 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Narciso 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Miguel Rocha1 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo2015 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maranhão 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Frank_Gomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

Data igual do facebook

Fazer busca no Banco de dados usando vários critério

Fóruns

Tempo Real

Informação importante