Crie uma galeria de imagens interativa com HTML, CSS e JavaScript

Quer aprender como transformar sua galeria de imagens estáticas em algo mais interativo para uma boa experiência do usuário? Aguente firme, porque estamos prestes a embarcar em uma jornada que transformará suas habilidades de web design.

As imagens são uma das muitas maneiras de chamar a atenção dos usuários quando eles estão no seu site. Uma maneira eficiente de exibir uma coleção de imagens é criar uma galeria de imagens. Uma galeria de imagens é um componente comum e útil para exibir várias imagens de maneira visualmente atraente. Para construir uma galeria de imagens, você precisará começar com a estrutura e o estilo básicos e depois aprimorá-los com interatividade.

O que é uma galeria de imagens interativa?

Uma galeria de imagens interativa é uma galeria de imagens dinâmica que permite aos usuários navegar por uma seleção de imagens de uma forma fácil de usar e bem organizada. Freqüentemente, os usuários podem interagir com as imagens para desencadear algumas ações. Essas galerias podem incluir recursos como navegação em miniaturas e a capacidade de visualizar imagens em um formato maior, como modal ou lightbox.

Aqui estão alguns recursos comumente encontrados na maioria das galerias de imagens interativas:

1. Controles de navegação: São fornecidos os botões/ícones anterior e seguinte que os usuários podem usar para navegar entre as imagens na galeria.
2. Navegação em miniaturas: As imagens são exibidas como miniaturas, o que permite aos espectadores navegar rapidamente por toda a coleção.
3. Caixa de luz: Quando uma miniatura é clicada, uma janela modal (também conhecida como “lightbox”) é aberta. Isso exibe a imagem selecionada em um tamanho maior e na maioria das vezes permite que os usuários naveguem por toda a galeria usando os controles de navegação fornecidos.
4. Pré-visualizações de imagens: ocorre quando a página permite que os usuários passem o mouse sobre uma miniatura para exibir uma visualização maior da imagem sem fazer com que o usuário saia da página atual.
5. Legenda e informações: Legendas, descrições ou informações sobre cada imagem podem ser exibidas na lightbox.

Neste tutorial, abordaremos os fundamentos da criação de uma galeria de imagens interativa, construindo uma lightbox usando HTML, CSS e JavaScript.

O que é uma caixa de luz?

Uma lightbox é um elemento da interface do usuário ou um componente baseado em JavaScript que é frequentemente usado para exibir imagens, filmes ou outras mídias em um pop-up ou janela modal em um site. A função de uma lightbox é focar a atenção do usuário no conteúdo que está sendo exibido, frequentemente lançando uma sombra escura ou escurecendo o fundo para chamar a atenção para o conteúdo modal.

Aqui está uma demonstração de caneta de código para mostrar a galeria de imagens/lightbox interativa que construiremos neste tutorial. Veja isso em modo completo em seu editor para obter a experiência completa.

Etapa 1: Estrutura HTML

Começaremos configurando a estrutura HTML da nossa galeria de imagens. Esta é a estrutura HTML, composta por um seção com meta tags, um título e a folha de estilo externa.

• O lightbox div contém toda a estrutura do lightbox.
• O close-btn span é um botão fechar marcado com um símbolo “x”. Ele aciona o closeLightbox função quando clicado.
• O lightbox-img tag img representa a imagem principal na lightbox. Sua fonte será atualizada dinamicamente usando JavaScript.
• O thumbnail-container div é um contêiner para imagens em miniatura e será preenchido dinamicamente usando JavaScript.
• O Anterior e Próximo botões permitem a navegação entre imagens na lightbox.

Etapa 2: estilo CSS básico

Vamos adicionar alguns estilos CSS básicos para tornar nossa galeria de imagens visualmente atraente. Crie um arquivo chamado style.css e vincule-o ao seu arquivo HTML.

• Estilos de corpo: define a família da fonte, remove a margem e o preenchimento padrão e define uma cor de fundo.
• Estilos de galeria: definem como a galeria é exibida – como um contêiner flexível com itens agrupados.
• Estilos de imagem da galeria: esta propriedade de estilo define margens, estilo do cursor e dimensões para as imagens da galeria.
• O lightbox estilos fazem com que cubra toda a janela de visualização com um fundo preto semitransparente. É configurado como um flex container, permitindo o empilhamento vertical de elementos.
• O lightbox-img estilos definem a largura e altura máximas da imagem lightbox principal para torná-la responsiva.
• Estilos de botão Fechar: Este estilo posiciona o botão Fechar no canto superior direito da janela.
• Estilos de botão de navegação: posiciona os botões anterior e seguinte nos lados esquerdo e direito, respectivamente, da imagem lightbox. Efeitos de foco são adicionados para feedback visual.
• O thumbnail-container e thumbnail os estilos definem a aparência das imagens em miniatura, incluindo exibição, direção, tamanho, estilo do cursor, margem e efeito de transição. O efeito pairar e um active-thumbnail classe fornece feedback visual.

Etapa 3: JavaScript para interatividade

Crie um arquivo chamado script.js e vincule-o ao seu arquivo HTML. Agora vamos dividir o código JavaScript em seções menores e explicar cada parte.

1. Inicialização de variável:

   • currentIndex: Mantém o índice da imagem atualmente exibida.
   • images: selecione todas as imagens da galeria.
   • totalImages: Armazena o número total de imagens na galeria.

2. openLightbox Função:

   • Esta função é acionada quando uma imagem da galeria é clicada.
   • Determina o índice da imagem clicada e atualiza currentIndex.
   • Ele então chama updateLightboxImage para exibir a imagem selecionada na lightbox.
   • Em seguida, ele define a lightbox para ficar visível (display: flex).

3. closeLightbox Função:

   • Esta função fecha a lightbox definindo sua propriedade display como ‘none’.

4. changeImage Função:

   • Esta função altera a imagem exibida na lightbox com base na direção fornecida (1 para o próximo, -1 para o anterior).
   • Ele lida com as condições de contorno para retornar à primeira imagem após atingir a última e vice-versa.
   • A função então chama updateLightboxImage para atualizar o conteúdo da lightbox.

5. updateLightboxImage Função:

   • Isso atualiza a imagem principal do lightbox e gera e exibe miniaturas dinamicamente.
   • Destaca a miniatura atualmente selecionada.
   • É chamado ao abrir a lightbox, alterar imagens ou clicar em uma miniatura.

6. updateMainImage Função:

   • Isso atualiza a imagem principal da lightbox quando uma miniatura é clicada.
   • Também é chamado pelo ouvinte de evento click anexado a cada miniatura.

7. Miniaturas iniciais:

   • Chamadas updateLightboxImage para adicionar o conjunto inicial de miniaturas.

8. Ouvinte de eventos de navegação por teclado:

   • Escuta os pressionamentos das teclas de seta para a esquerda e para a direita no teclado.
   • Chamadas changeImage para navegar entre as imagens quando a lightbox está aberta.

Etapa 4: testando o site

Salve seus arquivos e abra seu arquivo HTML em um navegador da web, e você verá sua galeria de imagens interativa em ação. Ao clicar em qualquer uma das imagens, abre-se um modal com a imagem clicada sendo exibida em negrito e também adiciona botões de navegação para facilitar a movimentação entre as imagens. Ele também adiciona miniaturas sob a imagem lightbox.

A miniatura da imagem específica que está sendo exibida terá um estilo de opacidade/sombra escura sobre ela. As outras imagens em miniatura não exibidas atualmente não terão a opacidade escura. Há também um ícone de fechamento (X) no canto superior direito do modal que, quando clicado, fecha o modal.

Conclusão

E aí está! Você construiu com sucesso uma galeria de imagens interativa usando HTML, CSS e JavaScript. Esta galeria oferece aos usuários a capacidade de visualizar imagens em uma mesa de luz, criando uma experiência de usuário mais envolvente e visualmente atraente.

Você pode personalizar esta galeria ou melhorá-la adicionando recursos como animações personalizadas e funcionalidade de pesquisa. Além disso, para garantir um design responsivo e fácil de usar, otimize sua galeria para diferentes larguras de tela e dispositivos. Pratique mais construindo galerias de imagens mais interativas para se familiarizar com esse conceito.

Também é importante observar que embora um lightbox possa ser construído com HTML, CSS e JavaScript, existem bibliotecas JS externas disponíveis para ajudar na construção de lightboxes. Algumas dessas bibliotecas JavaScript incluem lightbox2 e PhotoSwipe.

Boa codificação!