带查看器的照片画廊 · 跟马丁学编程

它会怎么工作

我们升级第 1 级的画廊：点击小照片，大版本在整页深色背景上打开（这叫 lightbox）。再点一次关闭。

跟我看：lightbox

HTML——在画廊下面加”放大窗口”（一开始隐藏）：

<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——覆盖整个屏幕的窗口：

#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——新东西：一次处理所有照片：

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

新东西：

querySelectorAll(".gallery img")——找到所有匹配 CSS 选择器的元素（和 CSS 里语法一样！）。返回列表。
forEach((photo) => { ... })——“对列表里每一项做这件事。” 循环——编程的另一个基本块。
photo.src——图片地址。从小图复制到大图。

轮到你了 💪

按示例给网站加 lightbox。第 1 级已有画廊——确保选择器（.gallery img）和你的 class 匹配。
勇敢者的升级——用箭头导航：

额外：下一张/上一张照片

脚本扩展——记住当前打开哪张：

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

还有两样新东西：function showPhoto(number) {...} 是命名函数——一段可以从任何地方按名字运行的代码。photos[current] 按位置从列表取项（从 0 开始数！）。

项目想法：🏫 学校活动照片 · 🙋 你的作品和冒险 · 🌍 旅行照片（lightbox 在这里最出彩！）· ⚽ 比赛瞬间。

✅

检查一下： 点照片 → 在深色背景上变大。再点 → 关闭。有额外功能的话，还能用箭头导航、Escape 关闭。专业网站画廊就是这样——现在你知道里面是什么了。

这堂课你要记住

querySelectorAll() 找所有匹配 CSS 选择器的元素，forEach 逐个处理。
lightbox = 隐藏的全页 <div>（position: fixed; inset: 0）+ 切换 hidden class。
函数 function name() {...} 是命名的、可重复使用的代码包。