Fotogalerija s pregledovalnikom

Klik na fotografijo jo poveča čez cel zaslon. Naučil se boš delati s skupino elementov.

Kako bo delovalo

Nadgradili bomo galerijo iz ravni 1: klik na majhno fotografijo odpre veliko različico čez celo stran s temnim ozadjem (to se imenuje lightbox). Ponovni klik jo zapre.

HTML – pod galerijo dodaj “povečevalno okno” (začetek skrito):

<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 – okno, ki prekrije celoten zaslon:

#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 – in zdaj nekaj novega: delamo z vsemi fotografijami hkrati:

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

Novo:

querySelectorAll(".gallery img") – najde vse elemente, ki ustrezajo CSS izbirniku (ista sintaksa kot v CSS!). Vrne seznam.
forEach((photo) => { ... }) – “to naredi za vsak element na seznamu.” Zanka – še en osnovni gradnik programiranja.
photo.src – naslov slike. Kopiramo ga iz majhne v veliko fotografijo.

Zdaj si na vrsti 💪

Po zgornjem primeru na spletno stran dodaj lightbox. Galerijo že imaš iz ravni 1 – preveri, da se izbirnik (.gallery img) ujema s tvojimi razredi.
Nadgradnja za pogumne – krmarjenje s puščicami:

Bonus: naslednja/prejšnja fotografija

Razširitev skripte – si zapomnimo, katera fotografija je trenutno odprta:

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

Še dve novi stvari: function showPhoto(number) {...} je poimenovana funkcija – paket kode, ki ga lahko kličeš od koder koli. In photos[current] vzame element iz seznama po položaju (številčenje se začne pri nič!).

Ideje za projekte: 🏫 fotografije šolskih dogodkov · 🙋 tvoje stvaritve in avanture · 🌍 fotografije s potovanj (tukaj lightbox res zasije!) · ⚽ trenutki s tekem.

✅

Preveri se: Klikneš fotografijo → poveča se na temnem ozadju. Klikneš znova → zapre se. Z bonusom lahko krmariš s puščicami in zapreš z Escape. Tako delujejo galerije na profesionalnih spletnih straneh – in zdaj veš, kaj je notri.

Kaj si vzameš iz te lekcije

querySelectorAll() najde vse elemente, ki ustrezajo CSS izbirniku, forEach gre skozi njih enega za drugim.
Lightbox = skrit <div>, ki prekrije celotno stran (position: fixed; inset: 0) + preklapljanje razreda hidden.
Funkcija function ime() {...} je poimenovan, ponovno uporaben paket kode.

Kako bo delovalo

Pokažem ti: lightbox

Zdaj si na vrsti 💪

Kaj si vzameš iz te lekcije