Uma lightbox é usada em sites para exibir conteúdo multimídia de forma mais envolvente por meio do uso de uma janela popup ou modal sobre o conteúdo principal da página. Neste laboratório, você criará uma galeria lightbox que exibe imagens em tamanho real quando uma miniatura é clicada. Para cada imagem, duas versões são fornecidas: uma miniatura e uma imagem em tamanho real. A imagem em tamanho real é a mesma da miniatura, mas sem o sufixo -thumbnail. Objetivo: Atenda às user stories abaixo e faça todos os testes passarem para concluir o laboratório. User Stories: 1. Você deve ter um div com uma classe gallery dentro do seu body. 1. Dentro do elemento .gallery, você deve ter três miniaturas de imagem, cada uma com uma classe gallery-item. Você deve usar os seguintes links para imagens em miniatura:

• https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/stonehenge-thumbnail.jpg
• https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/storm-thumbnail.jpg
• https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/trees-thumbnail.jpg

1. Você deve ter um div com uma classe lightbox dentro do seu body. 1. Você deve ter um button com um id de close-btn dentro do seu elemento .lightbox. Você pode usar × como seu texto, se desejar. 1. Você deve ter um img com um id de lightbox-image dentro do seu elemento .lightbox. 1. Seu elemento .lightbox deve ter uma posição fixa para que a pré-visualização seja aberta sobre as imagens atuais. 1. Seu elemento .lightbox deve cobrir toda a viewport definindo a altura e a largura para 100% do contêiner. Você deve garantir que o elemento .lightbox comece no canto superior esquerdo do contêiner. 1. .lightbox deve ter uma cor de fundo. Inicialmente, sua propriedade display deve ser definida como none para ocultá-la. 1. Quando você clicar em um dos seus elementos .gallery-item, a propriedade display do elemento .lightbox deve ser definida como flex para tornar o elemento .lightbox e os dois elementos dentro dele visíveis. 1. Quando você clicar em um dos seus elementos .gallery-item, o atributo src do elemento #lightbox-image deve ser definido para uma versão em tamanho real da imagem clicada, removendo -thumbnail do atributo src da imagem. As imagens em tamanho real estão localizadas nos seguintes links:

• https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/stonehenge.jpg
• https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/storm.jpg
• https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/trees.jpg

1. Quando seu elemento .lightbox estiver visível e você clicar no #close-btn ou no elemento .lightbox, o display do elemento .lightbox deve ser definido novamente como none. Nota: Certifique-se de vincular sua folha de estilos e o arquivo JavaScript no seu HTML.

Testes:

• Você deve ter um `div` com a classe `gallery` dentro do seu elemento `body`.
• Dentro do elemento `.gallery`, você deve ter três elementos `img` com a classe `gallery-item`.
• Dentro do elemento `.gallery`, você deve ter um elemento `img` com o `src` definido como `https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/stonehenge-thumbnail.jpg`.
• Dentro do elemento `.gallery`, você deve ter um elemento `img` com o `src` definido como `https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/storm-thumbnail.jpg`.
• Dentro do elemento `.gallery`, você deve ter um elemento `img` com o `src` definido como `https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/trees-thumbnail.jpg`.
• Você deve ter um elemento `div` com a classe `lightbox` dentro do seu elemento `body`.
• Dentro do seu elemento `.lightbox`, você deve ter um elemento `button` com o `id` definido como `close-btn`.
• Dentro do seu elemento `.lightbox`, você deve ter um elemento `img` com o `id` definido como `lightbox-image`.
• Seu elemento `.lightbox` deve ter posicionamento fixo.
• Seu elemento `.lightbox` deve cobrir toda a viewport.
• Seu elemento `.lightbox` deve estar alinhado com o canto superior esquerdo do contêiner.
• Seu elemento `.lightbox` deve ter uma cor de fundo.
• Seu elemento `.lightbox` deve estar oculto inicialmente.
• Quando você clicar em um dos seus elementos `.gallery-item`, a propriedade `display` do elemento `.lightbox` deve ser definida como `flex` para tornar `.lightbox` e os dois elementos dentro dele visíveis.
• Quando você clicar em um dos seus elementos `.gallery-item`, o atributo `src` do elemento `#lightbox-image` deve ser definido para uma versão em tamanho real da imagem clicada, removendo `-thumbnail` do atributo `src` da imagem.
• Quando seu elemento `.lightbox` estiver visível e você clicar no botão `#close-btn`, o `display` do elemento `.lightbox` deve ser definido novamente como `none`.
• Quando seu elemento `.lightbox` estiver visível e você clicar no elemento `.lightbox`, o `display` do elemento `.lightbox` deve ser definido novamente como `none`.