Photo gallery with a viewer

Clicking on a photo makes it bigger, filling the whole screen. You'll learn to work with a group of elements.

How it will work

We’ll upgrade the gallery from Level 1: clicking a small photo opens a large version of it over the whole page with a dark background (this is called a lightbox). Clicking again closes it.

HTML – add a “zoom window” below the gallery (hidden at first):

<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 – a window covering the whole screen:

#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 – and now something new: we’re working with all the photos at once:

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");
});

New stuff:

querySelectorAll(".gallery img") – find all elements that match a CSS selector (the same syntax as in CSS!). Returns a list.
forEach((photo) => { ... }) – “do this for every item in the list.” A loop – another basic building block of programming.
photo.src – the image’s address. We copy it from the small photo into the big one.

Your turn 💪

Add a lightbox to your website following the example. You already have a gallery from Level 1 – just make sure the selector (.gallery img) matches your classes.
An upgrade for the brave – navigating with arrows:

Bonus: navigate to the next/previous photo

An extension of the script – we remember which photo is currently open:

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");
});

Two more new things: function showPhoto(number) {...} is a named function – a package of code you can run from anywhere by name. And photos[current] pulls an item out of a list by its position (counting starts at zero!).

Project ideas: 🏫 photos from school events · 🙋 your creations and adventures · 🌍 photos from trips (this is where the lightbox really shines!) · ⚽ moments from matches.

✅

Check yourself: You click a photo → it grows on a dark background. You click again → it closes. With the bonus, you can also navigate with arrows and close with Escape. This is exactly how galleries work on professional websites – and now you know what’s inside.

What to take away from this lesson

querySelectorAll() finds all elements matching a CSS selector, forEach goes through them one by one.
A lightbox = a hidden <div> covering the whole page (position: fixed; inset: 0) + toggling the hidden class.
A function function name() {...} is a named, reusable package of code.

How it will work

Show me: the lightbox

Your turn 💪

What to take away from this lesson