1

Estou com uma dúvida, não sei nem como pesquisar o que eu quero.

A ideia seria clicar na imagem do Vídeo 1 e o Vídeo e o Titulo mudassem sem sair da página, assim pro 2 e 3. Tomei uma surra em uns códigos mas esse na verdade não sei nem como pesquisar.

inserir a descrição da imagem aqui

3
  • Provavelmente o que procura e uma Single Page Application que muda dinamicamente o video sem ter de recarregar a pagina. Umas das frameworks usadas para produzir SPAs e o angularjs
    – jpmnteiro
    24/11/2015 às 9:08
  • você já usa jQuery ou outra frame em JS, como Angular? Ou apenas está trabalhando com css/js puro? Tem alguma restrição de usar algum deles? 24/11/2015 às 9:49
  • No click do video você pode alterar o src do video para o video que voce precisa e colocar o titulo também. 24/11/2015 às 10:25

1 Resposta 1

1

Podes fazer isto da seguinte maneira:

function mostraDiv(num) {
    document.getElementById('div1').style.display='none';
    document.getElementById('div2').style.display='none';
    document.getElementById('div3').style.display='none';
    document.getElementById('div'+num).style.display='block';
}
.hiddenEl{display:none;}
<div class="sidebarContainer">
    <button class="imagens" onclick="mostraDiv('1')">Mostra Div 1</button>
    <button class="imagens" onclick="mostraDiv('2')">Mostra Div 2</button>
    <button class="imagens" onclick="mostraDiv('3')">Mostra Div 3</button>
</div>

<div class="mainContainer">
    <div id="div1">Sou a div1</div>
    <div id="div2" class="hiddenEl">Sou a div2</div>
    <div id="div3" class="hiddenEl">Sou a div3</div>
</div>

Depois basta fazeres as modificações à tua medida, trocando os botões por divs e inserindo imagens dentro delas como thumbnails de preview do vídeo que o usuário irá ver, ao clicar no botão/imagem pretendida e também popular as divs com o conteúdo (títulos, vídeos etc).

Eu criei aqui um exemplo no JSFiddle simples mas bem elaborado de como isto irá funcionar com os respetivos títulos e vídeos para cada botão, para teres uma ideia.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .