Como criar uma galeria de imagens simples usando HTML, CSS e JavaScript

Criar uma galeria de imagens simples usando HTML, CSS e JavaScript é uma ótima maneira de aprender os fundamentos do desenvolvimento web. Na galeria de imagens, você poderá navegar pelas imagens selecionando miniaturas para ampliar a imagem na página da web.

Para criar a galeria, você pode usar HTML para adicionar o conteúdo da página da Web e CSS para adicionar o estilo. Você pode usar JavaScript para tornar a galeria interativa quando o usuário clicar em qualquer uma das miniaturas.

Como criar a interface do usuário para a galeria de imagens

Adicione a IU para a galeria de imagens usando HTML e CSS. Isso inclui adicionar uma imagem grande no centro da página da Web, que mudará com base na miniatura selecionada. Você também pode ver o exemplo completo

1. Crie um novo arquivo chamado "index.html".
2. Dentro deste arquivo, adicione a estrutura básica do código HTML:

   html>
   <htmlidioma="pt-BR">
   <cabeça>
   <título>Galeria de imagenstítulo>
   cabeça>
   <corpo>
   <divaula="introdução">
   <h2>Galeria de imagensh2>
   <p>Selecione uma miniatura abaixo para ver a imagemp>
   div>
   corpo>
   html>

3. Crie uma subpasta chamada "imagens". Preencha-o com várias imagens e nomeie-as de "image1.jpg" a "image10.jpg".
4. Em seu arquivo HTML, adicione um div para a galeria de imagens:

   <diveu ia="Galeria de imagens">
   div>

5. Dentro do div da galeria de imagens, adicione uma tag de imagem para exibir a imagem selecionada ampliada. Por padrão, exiba a primeira imagem dentro da pasta "imagens":

   <imgeu ia="imagem atual"origem="imagens/imagem1.jpg"alternativo="Imagem 1">

6. Na mesma pasta do seu arquivo HTML, adicione um novo arquivo chamado "styles.css" com o seguinte CSS. Sinta-se à vontade para modificar o CSS para adicionar componentes de design neumórfico ou faça outros ajustes de design usando essas dicas e truques de CSS.

7. .intro { 
   alinhamento de texto: Centro; 
   família de fontes: arial;
   }
   h2 { 
   tamanho da fonte: 36px;
   }
   p { 
   tamanho da fonte: 14pt;
   }
   #Galeria de imagens { 
   largura: 600px; 
   margem: 0 auto;
   }
   #imagem atual { 
   largura: 100%;
   } 

8. Adicione um link para seu arquivo CSS na tag head do seu arquivo HTML:

   <linkrele="folha de estilo"tipo="texto/css"href="estilos.css">

Como adicionar miniaturas para as outras imagens na galeria

Atualmente, a galeria de imagens exibe apenas a primeira imagem. Abaixo da imagem selecionada, adicione uma lista de miniaturas. Essas miniaturas exibirão uma visualização de todas as imagens dentro da pasta "imagens".

1. Dentro do div da galeria de imagens no arquivo HTML, adicione outro div para exibir as miniaturas das outras imagens:

   <diveu ia="polegares de imagem">div>

2. Dentro do arquivo CSS, adicione algum estilo para a lista de miniaturas:

   #image-thumbs { 
   mostrar: flex; 
   justificar-conteúdo: Centro; 
   margem superior: 20px;
   }

3. Na mesma pasta dos arquivos HTML e CSS, adicione um novo arquivo chamado "script.js".
4. Adicione um link ao seu arquivo JavaScript na parte inferior da tag do corpo HTML:

   <corpo>
    Seu código aqui 
   <roteiroorigem="script.js">roteiro>
   corpo>

5. Dentro do arquivo JavaScript, pegue o elemento HTML da div que irá armazenar a lista de miniaturas:

   var imageThumbs = documento.getElementById("polegares de imagem");

6. Adicione um loop for para percorrer cada uma das 10 imagens na galeria:

   para (var eu = 1; eu <= 10; i++) {
   }

7. Dentro do loop, crie um novo elemento img para cada imagem:

   var polegar = documento.createElement("img");

8. Adicione valores para os atributos "src" e "alt". Neste caso, o atributo "src" é o caminho do arquivo para a imagem no mesmo índice dentro da pasta "images":

   thumb.src = "imagens/imagem" + eu + ".jpg";
   thumb.alt = "Imagem" + eu;

9. Dentro do seu arquivo CSS, adicione uma nova classe para estilizar a miniatura da imagem. Você também pode adicionar outro estilo CSS de passagem ou de transição para as miniaturas torne seu site responsivo e interativo.

   .dedão { 
   largura: 80px; 
   altura: 80px; 
   ajuste de objeto: cobrir; 
   margem direita: 10px; 
   cursor: ponteiro;
   }

10. Dentro do arquivo JavaScript, adicione a classe acima à nova miniatura:

    thumb.classList.add("dedão");

11. Adicione a nova miniatura ao elemento HTML que contém a lista de miniaturas:

    imageThumbs.appendChild (polegar);

Como alterar a imagem quando o usuário clica em uma miniatura

Ao clicar em uma das miniaturas, o usuário altera a imagem ampliada no centro da página para a imagem selecionada. Você pode adicionar essa funcionalidade dentro do arquivo JavaScript.

1. Na parte superior do arquivo JavaScript, obtenha o elemento HTML da imagem atualmente selecionada:

   var currentImage = documento.getElementById("imagem atual");

2. Dentro do loop for, adicionar um manipulador de eventos que é acionado quando o usuário seleciona qualquer uma das miniaturas na parte inferior da página:

   thumb.addEventListener(
   "clique", função() {
    }
   );

3. Dentro do manipulador de eventos, altere o atributo "src" da imagem atual para a imagem recém-selecionada. Você também pode atualizar o atributo "alt":

   currentImage.src = esse.src;
   currentImage.alt = esse.alt;

4. Clique no arquivo "index.html" para abri-lo em um navegador da web.
5. Selecione qualquer uma das miniaturas para visualizar a imagem.

Continue expandindo seu conhecimento de JavaScript

Independentemente da sua experiência, é importante continuar construindo projetos para expandir seus conhecimentos. Continue a explorar outros projetos, como construir um jogo de xadrez, uma calculadora ou uma lista de tarefas.