Mudar imagem com JavaScript

godoy89 · Julho 17, 2009

Gente, to com uma dúvida aqui!

Queria saber se tem como eu navegar por algumas fotos sem a utilização de iFrame ou Sistema (Banco de Dados).

Apesar de não entender muito bem JavaScript, acho que deve dar pra fazer com onClick (na thumbnail [que é representada pelo X na imagem]) pra aparecer lá em cima (nos ~~~)

Aqui a imagem:

Imagem Postada

PS: O onClick foi um meio que eu pensei em fazer, se não der pra fazer com ele ou se tiver um jeito mais fácil, sintam-se a vontade! (foi só uma opinião)

Valeu galera!

augustoclaro · Julho 17, 2009

você quer tipo um slideshow é isso?

n entendi, desculpa :/

godoy89 · Julho 17, 2009

você quer tipo um slideshow é isso?

n entendi, desculpa :/

ah, deculpa se eu expliquei mal!

vou tentar de novo:

eu quero que, quando eu clique nos thumbnails (X), as imagens apareçam lá em cima (~~~)

eu sei fazer isso via iFrame, mas gosto muito (apesar de ser funcional)

melhorou agora? (:

klonder · Julho 17, 2009

Acabei de terminar um código muito interessante aqui, com pré-carregamento do Tumbnail:

<html>
<head>
<title>Álbum de fotos</title>
<script type="text/javascript">
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];
		//alert(carregar[i].src);
		document.getElementById("imgTumb"+i).innerHTML = "Carregando...";
		window.setTimeout("verificaCarregamento("+i+")",100);
	}
document.getElementById("imgQuadro").src = imagem[0];
}

function verificaCarregamento(imgID) {
	if(carregar[imgID].complete ) {
		document.getElementById("imgTumb"+imgID).innerHTML = '<img src="'+carregar[imgID].src+'" width="120" height="90" onClick=abrirImagem('+imgID+')>';
		
	}else{
		window.setTimeout("verificaCarregamento("+imgID+")", 100);
	}
}

function abrirImagem(imgID) {
	document.getElementById("imgQuadro").src = imagem[imgID];
}

window.onload = carregarImagens;
</script>
</head>

<body>
<center>
<table border="1" width="400" height="300">
<tr>
	<td align="center"><img width="400" height="300" id="imgQuadro" src=""></td>
</tr>
</table>

<br><br>
<table border="1" cellpadding="0" cellspacing="5">
<tr>
	<td align="center" width="120" height="90"><div id="imgTumb0"></div></td>
	<td align="center" width="120" height="90"><div id="imgTumb1"></div></td>
	<td align="center" width="120" height="90"><div id="imgTumb2"></div></td>
	<td align="center" width="120" height="90"><div id="imgTumb3"></div></td>
	<td align="center" width="120" height="90"><div id="imgTumb4"></div></td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="5">
<tr>
	<td align="center" width="120" height="90"><div id="imgTumb5"></div></td>
	<td align="center" width="120" height="90"><div id="imgTumb6"></div></td>
	<td align="center" width="120" height="90"><div id="imgTumb7"></div></td>
	<td align="center" width="120" height="90"><div id="imgTumb8"></div></td>
	<td align="center" width="120" height="90"><div id="imgTumb9"></div></td>
</tr>
</table>

</center>
</body>
</html>

godoy89 · Julho 17, 2009

Klonder, deu uma olhada no código e acho que é exatamente isso que eu preciso, porém só vou poder ver se é realmente isso durante a noite. Estou saindo do trabalho agora, porém só a noite eu chego em casa para analisar o código.

Em casa, eu edito o post dizendo se é ou não o que eu procuro.

Obrigado,

Godoy.

godoy89 · Julho 18, 2009

Desulpem pelo post duplo, mas não achei o botão "editar".

Klonder, muito interessante o seu script porém eu queria saber se não tem como separar as thumbnails das imagens grandes...

como vou ter mais de 20 imagens em cada página, gostaria de carregar só as Thumbnails ao entrar e deixar que o usuário carregue a imagem original (grande) somente quando clicar na imagem que lhe interessa.

acho que uma função "abre link" (via JavaScript) com o target em cima resolve o meu problema

quaisquer dúvidas, to aqui!

webmind · Julho 18, 2009

o que o klonder fez esta certo so tem de no array colocar as imagens (mini)

imagine que as thumbnail se vao charamar por exemplo xxxx_thumb.jpg

depois aqui

 function abrirImagem(imgID) {
 //aqui você faz um corte 
 
 imagem=imgID.substr(0,imgID.length-10)+imgID.substr(imgID.length-4,imgID.length)
 document.getElementById("imgQuadro").src =imagem;
 }

godoy89 · Julho 19, 2009

@webmind

o problema é que a imagem thumb eh a mesma pra original, que na verdade á uma imagem superior a 1024x768

Minhas thumbnails são 100x100 e as maiores 600x400

Alguém sabe me dizer como faço pra definir as thumbs e, no <a href>, colocar um JavaScript com target em uma célula superior?

klonder · Julho 19, 2009

Bom, eu alterei o código acima para ficar do jeito que você deseja. Na verdade, ele poderia ficar bem menor...

Entretanto, como desconheço a terminologia que você está usando para as Thumbnails e fotos maiores, fiz de uma maneira "generalizada" aqui... que poderá ter semelhança nos nomes ou não.

O ideal seria que os nomes das imagens tivesse algo em comum, como um id por exemplo:

Thumbnail: Thumbnail_1.jpg;

Foto maior: foto_1.jpg;

Isso deixaria o JavaScript bem menor e simplificado. Como não tenho essas informações, vou "generalizar" geral:

Segue o código com alguns comentários:

<html>
<head>
<title>Álbum de fotos</title>
<script type="text/javascript">
var Thumb = new Array();
var imagem = new Array();
//Thumb » Link para os thumbnails;
//imagem » Imagens grandes, que serão exibidas;
Thumb[0] = "http://fc05.deviantart.com/fs20/f/2007/270/3/4/Balance_Wallpaper_by_nxxos.jpg";
imagem[0] = "http://fc05.deviantart.com/fs20/f/2007/270/3/4/Balance_Wallpaper_by_nxxos.jpg";

Thumb[1] = "http://www.papeldeparede.etc.br/wallpapers/paisagem-natural_3995_1280x800.jpg";
imagem[1] = "http://www.papeldeparede.etc.br/wallpapers/paisagem-natural_3995_1280x800.jpg";

Thumb[2] = "http://www.papeldeparede.etc.br/wallpapers/amigo-pinguin_3993_1024x768.jpg";
imagem[2] = "http://www.papeldeparede.etc.br/wallpapers/amigo-pinguin_3993_1024x768.jpg";

Thumb[3] = "http://www.papeldeparede.etc.br/wallpapers/the-simpsons-ou-sopranos_3992_1024x768.jpg";
imagem[3] = "http://www.papeldeparede.etc.br/wallpapers/the-simpsons-ou-sopranos_3992_1024x768.jpg";

Thumb[4] = "http://www.papeldeparede.etc.br/wallpapers/bart-e-skate_3976_1024x768.jpg";
imagem[4] = "http://www.papeldeparede.etc.br/wallpapers/bart-e-skate_3976_1024x768.jpg";

Thumb[5] = "http://www.papeldeparede.etc.br/wallpapers/_3988_1024x768.jpg";
imagem[5] = "http://www.papeldeparede.etc.br/wallpapers/_3988_1024x768.jpg";

Thumb[6] = "http://www.papeldeparede.etc.br/wallpapers/homer-astronauta_3977_1024x768.jpg";
imagem[6] = "http://www.papeldeparede.etc.br/wallpapers/homer-astronauta_3977_1024x768.jpg";

Thumb[7] = "http://www.papeldeparede.etc.br/wallpapers/tigre-branco_3968_1024x768.jpg";
imagem[7] = "http://www.papeldeparede.etc.br/wallpapers/tigre-branco_3968_1024x768.jpg";

Thumb[8] = "http://www.papeldeparede.etc.br/wallpapers/bicicleta-voadora_3840_1024x768.jpg";
imagem[8] = "http://www.papeldeparede.etc.br/wallpapers/bicicleta-voadora_3840_1024x768.jpg";

Thumb[9] = "http://www.papeldeparede.etc.br/wallpapers/gato-na-cama_3829_1024x768.jpg";
imagem[9] = "http://www.papeldeparede.etc.br/wallpapers/gato-na-cama_3829_1024x768.jpg";

//Índice da imagem que deverá ser exibida:
var PrimeiraImagem = 3;

var i;
function carregarImagens() {

	for (i=0; i<Thumb.length; i++) {
document.getElementById("imgTumb"+i).innerHTML = '<img src="'+Thumb[i]+'" width="100" height="100" onclick=abrirImagem('+i+')>';
		if (i==PrimeiraImagem) {
			document.getElementById("imgQuadro").src = imagem[i];
		}
	}

}

function abrirImagem(imgID) {
        document.getElementById("imgQuadro").src = Thumb[imgID];
}
window.onload = carregarImagens;
</script>
</head>

<body>
<center>
<table border="1" width="400" height="300">
<tr>
        <td align="center"><img width="400" height="300" id="imgQuadro" src=""></td>
</tr>
</table>

<br><br>
<table border="1" cellpadding="0" cellspacing="5">
<tr>
        <td align="center" width="100" height="100"><div id="imgTumb0"></div></td>
        <td align="center" width="100" height="100"><div id="imgTumb1"></div></td>
        <td align="center" width="100" height="100"><div id="imgTumb2"></div></td>
        <td align="center" width="100" height="100"><div id="imgTumb3"></div></td>
        <td align="center" width="100" height="100"><div id="imgTumb4"></div></td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="5">
<tr>
        <td align="center" width="100" height="100"><div id="imgTumb5"></div></td>
        <td align="center" width="100" height="100"><div id="imgTumb6"></div></td>
        <td align="center" width="100" height="100"><div id="imgTumb7"></div></td>
        <td align="center" width="100" height="100"><div id="imgTumb8"></div></td>
        <td align="center" width="100" height="100"><div id="imgTumb9"></div></td>
</tr>
</table>

</center>
</body>
</html>

A imagem maior está com 400x300 px, mas agora é só você ajustar os estilos de acordo com suas necessidades.

Paquielli · Abril 24, 2012

Vamos lá, sei q estárei renascendo o topico mais estou com o mesmo problema e ta quase tudo certo , so que quando eu clico na thumb para abrir a grande ela parece que se expande e não troca a img vou mostra print

Print antes de clicar:

Depois de clicar:

Arquivado

Mudar imagem com JavaScript

Recommended Posts

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

augustoclaro 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webmind 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paquielli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Teclas para Salvar (atalho)

Javascript - Passar Parâmetros para uma Função.

Tem como JS executar/chamar um programa externo?

Fóruns

Tempo Real

Informação importante