Cardápio dinâmico em javascript

[victormoraess 0]

Tenho conhecimento básico em javascript e amplo em HTML e CSS, gostaria de algumas dicas de como posso fazer um cardápio interativo.

 

Por exemplo, eu tenho uma div com o nome do produto, quando o usuário clicar naquela div uma outra div carrega as informações daquele produto.

 

Dentro as informações do produto preciso de ajuda com outra coisa, a imagem do produto. Eu gostaria que fosse aquele estilo de imagem de site de e-commerce, onde tem três miniaturas abaixo da foto com a foto ampliada e outras duas.

 

Imagem Exemplo

 

Na imagem acima está exemplificado como é a disposição da imagem e das miniaturas.

 

Quem puder me ajudar, agradeço.

[Criquio 19]

A ideia seria montar um array com os dados vindos de um banco de dados? Se for, veja a dica desse post para montar uma array em js com dados vindos via php: http://forum.imasters.com.br/topic/535744-como-pegar-num-valor-de-um-select-andes-de-submeter/

Para alterar os dados e imagens na div, basta passar o nome delas e o número da array. Algo como:

document.getElementById("img_produto").style.background = "url('imagens/produtos/" + array[0] + ".jpg')";
document.getElementById("desc_produto").innerHTML = array[1];
document.getElementById("valor_produto").text = array[2];

Dei exemplos para alterar a imagem usando css na primeira linha, para alterar o texto de uma div ou span na segunda linha e para alterar o valor de um textbox na terceira linha.

[victormoraess 0]

A ideia seria montar um array com os dados vindos de um banco de dados? Se for, veja a dica desse post para montar uma array em js com dados vindos via php: http://forum.imasters.com.br/topic/535744-como-pegar-num-valor-de-um-select-andes-de-submeter/

Para alterar os dados e imagens na div, basta passar o nome delas e o número da array. Algo como:

 

document.getElementById("img_produto").style.background = "url('imagens/produtos/" + array[0] + ".jpg')";
document.getElementById("desc_produto").innerHTML = array[1];
document.getElementById("valor_produto").text = array[2];

Dei exemplos para alterar a imagem usando css na primeira linha, para alterar o texto de uma div ou span na segunda linha e para alterar o valor de um textbox na terceira linha.

Não seria trazer os dados de banco de dados não, pq eu não sei usar php muito bem... Seria mais no estilo de cada produto ja ter uma imagem dessa como uma pagina de html, ai quando vc clicasse no nome do produto a div ia carregar aquela página do determinado produto, entendeu?

[Criquio 19]

Então você só quer mudar o texto e a imagem das divs, é isso? Nesse caso, se for como entendi, ainda pode ser usada a array. Nesse caso, bastaria montar, nela, os elementos de cada div, incluindo os nomes das imagens:

function fncProdutos(id){ // id será o id do elemento clicado

// Criando a array com os produtos e seus detalhes //

    var arrProdutos = [];

    arrProdutos[0] = "img1.jpg|Nome produto 1|Descrição produto 1|Preço produto 1";

    arrProdutos[1] = "img2.jpg|Nome produto 2|Descrição produto 2|Preço produto 2";

    arrProdutos[2] = "img3.jpg|Nome produto 3|Descrição produto 3|Preço produto 3";

// Pegando a parte inteira do id //

    var id_produto = parseInt(id.substring(3, id.length));

// Quebrando a array para separar os dados //

    var partes = arrProdutos[id_produto].split("|");

// Inserindo cada parte em seu devido div //

document.getElementById("img_produto").style.background = "url('imagens/produtos/" + partes[0] + ".jpg')";
document.getElementById("nome_produto").innerHTML = partes[1];
document.getElementById("desc_produto").innerHTML = partes[2];
document.getElementById("valor_produto").innerHTML = partes[2];

}

Essa é a parte do js. Agora, deve colocar um id tipo id0, id1, id2 em cada elemento que será clicado para chamar a devida array. Exemplo:

<div id="id0">Produto 1</div>
<div id="id1">Produto 2</div>
<div id="id2">Produto 3</div>
<div id="id3">Produto 4</div>

Para que a função seja chamada, precisamos colocar um onclick nas divs acima passando a id da própria div:

<div id="id0" onclick="fncProdutos(this.id);">Produto 1</div>
<div id="id1" onclick="fncProdutos(this.id);">Produto 2</div>
<div id="id2" onclick="fncProdutos(this.id);">Produto 3</div>
<div id="id3" onclick="fncProdutos(this.id);">Produto 4</div>

Veja se consegue adaptar.