Armazenando imagens em array

[Lucas109]

Bom, é o seguinte:

tenho uma div,  a qual exibe todos os produtos de uma loja virtual. Ela está dividida em grids e cada quadrado é a imagem do determinado produto, quando o usuário clica sobre uma das imagens é exibida uma div sobre a pagina a qual contém mais informações sobre o produto como por exemplo mais 5 imagens dele,  que sao passadas ao click de links.

Para fazer isso eu criei uma function para cada produto. Há um array global o qual armazena as 5 imagens, as quais são colocadas dentro de cada function. Os links incrementam ou decrementam a posição do array e exibem outra imagem.

function det1(){
	mais[0]= new Image();
	mais[0].src="imagens/Ninféias.jpg";
	mais[1]= new Image();
	mais[1].src='imagens/Montanhas azuis.jpg';
	document.getElementById("maisimg").src=mais[0].src;
	document.getElementById("info").innerHTML="Produto um";
	document.getElementById("detalhes").style.display="block";
	
}

function proximo(){
	contmais++;
	if(contmais==5){
		contmais=0;
	}
	document.getElementById("maisimg").src=mais[contmais].src;
	
}
function ant(){
	contmais--;
	if(contmais==0){
		contmais=5;
	}
	document.getElementById("maisimg").src=mais[contmais].src;
	
}

mais é o vetor global que armazena as 5 imagens

var mais = [ ];

obs: ja tentei com var mais = new array();

 

Mas não está funcionando, ele não passa da linha na qual eu 'tiro' a imagem do array : document.getElementById("maisimg").src=mais[0].src;

 

 

[JonathanMMachado]

Eae, beleza?
 

Cara, vi um possível erro no seu código (ou eu interpretei errado kk).

Mas na função ant() deve ir para imagem anterior, que esta dentro da variável mais, correto!?

Seguindo essa lógica, no seu if pode estar dando problema, pois a variável "mais" tem a posição 0 (zero) e não tem a posição 5 (cinco), indo de 0 a 4, concluindo as 5 imagens. Seguindo essa lógica, acredito que o correto seria:

 

function ant(){
	contmais--;
	if(contmais < 0){
		contmais = 4;
	}
	document.getElementById("maisimg").src = mais[contmais].src;
}

 

2 horas atrás, Lucas109 disse:

mais é o vetor global que armazena as 5 imagens

var mais = [ ];

obs: ja tentei com var mais = new array();

Em relação a isso, tive um problema semelhante, e resolvi iniciando a variável nula, e depois atribuindo a ela o valor de um array vazio:

 

var mais = null;
mais = [];

 

Caso o de cima não funcionar, tente ao invés de criar a variável mais com o "var" na frente, faça assim:

document.mais = []

E em toda chamada dessa variável chame com "document." na frente. Ex:

 

function ant(){
	contmais--;
	if(contmais == 0){
		contmais = 5;
	}
	document.getElementById("maisimg").src = document.mais[contmais].src;
	
}

 

[Lucas109]

Citação

Cara, vi um possível erro no seu código (ou eu interpretei errado kk).

Mas na função ant() deve ir para imagem anterior, que esta dentro da variável mais, correto!?

Seguindo essa lógica, no seu if pode estar dando problema, pois a variável "mais" tem a posição 0 (zero) e não tem a posição 5 (cinco), indo de 0 a 4, concluindo as 5 imagens.

que errinho feio não ? uheueheuheuh, obg !!

nenhuma das alternativas deram certo, do jeito que estava e na primeira ele exibe a div e aonde estaria a imagem fica branco.

parece que o problema esta nesta linha :

Citação

document.getElementById("maisimg").src=mais[0].src;

que é quando pega uma img do vet e joga na div

 

obg por responder !!

[Lucas109]

Eu resolvi o problema trocando:

document.getElementById("maisimg").src = mais[contmais].src;

por

document.getElementById("maisimg").style.backgroundImage = "url("+mais[contmais].src+")";

Obrigado pela ajuda !