Galeria de fotos com visualizador

Clicar numa foto faz-a crescer e preencher o ecrã inteiro. Vais aprender a trabalhar com um grupo de elementos.

Como vai funcionar

Vamos melhorar a galeria do Nível 1: clicar numa foto pequena abre uma versão grande sobre toda a página com fundo escuro (isto chama-se lightbox). Clicar outra vez fecha.

HTML – adiciona uma «janela de zoom» abaixo da galeria (escondida no início):

<div class="gallery">
  <img src="images/p1.jpg" alt="First photo">
  <img src="images/p2.jpg" alt="Second photo">
  <img src="images/p3.jpg" alt="Third photo">
</div>

<div id="lightbox" class="hidden">
  <img id="lightbox-photo" src="" alt="">
</div>

CSS – uma janela que cobre o ecrã inteiro:

#lightbox {
  position: fixed;          /* stuck over the whole window */
  inset: 0;                 /* 0 from every edge = the whole area */
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#lightbox img {
  max-width: 90%;
  max-height: 90%;
}

.hidden {
  display: none !important; /* hide completely */
}

JavaScript – e agora algo novo: estamos a trabalhar com todas as fotos de uma vez:

const photos = document.querySelectorAll(".gallery img");
const lightbox = document.getElementById("lightbox");
const lightboxPhoto = document.getElementById("lightbox-photo");

// For every photo in the gallery: show it big on click
photos.forEach((photo) => {
  photo.addEventListener("click", () => {
    lightboxPhoto.src = photo.src;
    lightboxPhoto.alt = photo.alt;
    lightbox.classList.remove("hidden");
  });
});

// Clicking anywhere in the lightbox closes it
lightbox.addEventListener("click", () => {
  lightbox.classList.add("hidden");
});

Coisas novas:

querySelectorAll(".gallery img") – encontra todos os elementos que correspondem a um seletor CSS (a mesma sintaxe que no CSS!). Devolve uma lista.
forEach((photo) => { ... }) – «faz isto para cada item da lista.» Um ciclo – outro bloco básico da programação.
photo.src – o endereço da imagem. Copiamo-lo da foto pequena para a grande.

Agora és tu 💪

Adiciona um lightbox ao teu site seguindo o exemplo. Já tens uma galeria do Nível 1 – certifica-te que o seletor (.gallery img) corresponde às tuas classes.
Uma melhoria para os corajosos – navegar com setas:

Bónus: navegar para a foto seguinte/anterior

Uma extensão do script – lembramos qual foto está aberta:

const photos = document.querySelectorAll(".gallery img");
const lightbox = document.getElementById("lightbox");
const lightboxPhoto = document.getElementById("lightbox-photo");
let current = 0;

function showPhoto(number) {
  // Handle wraparound: after the last photo comes the first again
  if (number < 0) number = photos.length - 1;
  if (number >= photos.length) number = 0;

  current = number;
  lightboxPhoto.src = photos[current].src;
  lightboxPhoto.alt = photos[current].alt;
}

photos.forEach((photo, index) => {
  photo.addEventListener("click", () => {
    showPhoto(index);
    lightbox.classList.remove("hidden");
  });
});

lightbox.addEventListener("click", () => {
  lightbox.classList.add("hidden");
});

// Navigate with the keyboard
document.addEventListener("keydown", (event) => {
  if (lightbox.classList.contains("hidden")) return;

  if (event.key === "ArrowRight") showPhoto(current + 1);
  if (event.key === "ArrowLeft") showPhoto(current - 1);
  if (event.key === "Escape") lightbox.classList.add("hidden");
});

Mais duas coisas novas: function showPhoto(number) {...} é uma função com nome – um pacote de código que podes correr de qualquer sítio pelo nome. E photos[current] tira um item de uma lista pela posição (a contagem começa em zero!).

Ideias de projeto: 🏫 fotos de eventos escolares · 🙋 as tuas criações e aventuras · 🌍 fotos de viagens (é aqui que o lightbox brilha mesmo!) · ⚽ momentos de jogos.

✅

Verifica tu: Clicas numa foto → cresce num fundo escuro. Clicas outra vez → fecha. Com o bónus, também podes navegar com setas e fechar com Escape. É exatamente assim que funcionam as galerias em sites profissionais – e agora sabes o que está por dentro.

O que ficas a saber desta lição

querySelectorAll() encontra todos os elementos que correspondem a um seletor CSS, forEach percorre-os um a um.
Um lightbox = um <div> escondido que cobre a página inteira (position: fixed; inset: 0) + alternar a classe hidden.
Uma função function name() {...} é um pacote de código com nome e reutilizável.

Como vai funcionar

Vou mostrar-te: o lightbox

Agora és tu 💪

O que ficas a saber desta lição