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 visualizar o código-fonte de exemplo completo no GitHub.
- Crie um novo arquivo chamado “index.html”.
- Dentro deste arquivo, adicione a estrutura básica do código HTML:
<!doctype html>
<html lang="en-US">
<head>
<title>Image Gallery</title>
</head>
<body>
<div class="intro">
<h2>Image Gallery</h2>
<p>Select a thumbnail below to view the image</p>
</div>
</body>
</html> - Crie uma subpasta chamada “imagens”. Preencha-o com várias imagens e nomeie-as de “image1.jpg” a “image10.jpg”.
- Em seu arquivo HTML, adicione um div para a galeria de imagens:
<div id="image-gallery">
</div> - Dentro do div da galeria de imagens, adicione uma tag de imagem para exibir a imagem selecionada ampliada. Por padrão, exibe a primeira imagem dentro da pasta “imagens”:
<img id="current-image" src="images/image1.jpg" alt="Image 1"> - 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órficos ou fazer outros ajustes de design usando essas dicas e truques de CSS.
-
.intro {
text-align: center;
font-family: Arial;
}h2 {
font-size: 36px;
}p {
font-size: 14pt;
}#image-gallery {
width: 600px;
margin: 0 auto;
}#current-image {
width: 100%;
} - Adicione um link para seu arquivo CSS na tag head do seu arquivo HTML:
<link rel="stylesheet" type="text/css" href="styles.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”.
- Dentro do div da galeria de imagens no arquivo HTML, adicione outro div para exibir as miniaturas das outras imagens:
<div id="image-thumbs"></div> - Dentro do arquivo CSS, adicione algum estilo para a lista de miniaturas:
#image-thumbs {
display: flex;
justify-content: center;
margin-top: 20px;
} - Na mesma pasta que seus arquivos HTML e CSS, adicione um novo arquivo chamado “script.js”.
- Adicione um link ao seu arquivo JavaScript na parte inferior da tag do corpo HTML:
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - Dentro do arquivo JavaScript, pegue o elemento HTML da div que irá armazenar a lista de miniaturas:
var imageThumbs = document.getElementById("image-thumbs"); - Adicione um loop for para percorrer cada uma das 10 imagens na galeria:
for (var i = 1; i <= 10; i++) {
} - Dentro do loop, crie um novo elemento img para cada imagem:
var thumb = document.createElement("img"); - 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 = "images/image" + i + ".jpg";
thumb.alt = "Image " + i; - 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 para tornar seu site responsivo e interativo.
.thumb {
width: 80px;
height: 80px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
} - Dentro do arquivo JavaScript, adicione a classe acima à nova miniatura:
thumb.classList.add("thumb"); - Adicione a nova miniatura ao elemento HTML que contém a lista de miniaturas:
imageThumbs.appendChild(thumb);
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.
- Na parte superior do arquivo JavaScript, obtenha o elemento HTML da imagem atualmente selecionada:
var currentImage = document.getElementById("current-image"); - Dentro do loop for, adicione um manipulador de eventos que é acionado quando o usuário seleciona qualquer uma das miniaturas na parte inferior da página:
thumb.addEventListener(
"click", function() {
}
); - 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 = this.src;
currentImage.alt = this.alt; - Clique no arquivo “index.html” para abri-lo em um navegador da web.
- 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.
Deixe um comentário