Fotogalerie s prohlížením

Jak to bude fungovat

Vylepšíme galerii z Poziomy 1: po kliknutí na malou fotku se přes celou stránku otevře její velká verze s tmavým pozadím (říká se tomu lightbox). Dalším kliknutím se zavře.

Pokaż mi to: lightbox

HTML – pod galerii přidej „zvětšovací okno” (na začátku schované):

<div class="galerie">
  <img src="obrazky/f1.jpg" alt="První fotka">
  <img src="obrazky/f2.jpg" alt="Druhá fotka">
  <img src="obrazky/f3.jpg" alt="Třetí fotka">
</div>

<div id="lightbox" class="schovany">
  <img id="lightbox-foto" src="" alt="">
</div>

CSS – okno přes celou obrazovku:

#lightbox {
  position: fixed;          /* přilepené přes celé okno */
  inset: 0;                 /* od všech okrajů 0 = celá plocha */
  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%;
}

.schovany {
  display: none !important; /* schovej úplně */
}

JavaScript – a teď novinka: pracujeme se všemi fotkami najednou:

const fotky = document.querySelectorAll(".galerie img");
const lightbox = document.getElementById("lightbox");
const lightboxFoto = document.getElementById("lightbox-foto");

// Pro každou fotku v galerii: po kliknutí ji ukaž velkou
fotky.forEach((fotka) => {
  fotka.addEventListener("click", () => {
    lightboxFoto.src = fotka.src;
    lightboxFoto.alt = fotka.alt;
    lightbox.classList.remove("schovany");
  });
});

// Kliknutí kamkoli do lightboxu ho zavře
lightbox.addEventListener("click", () => {
  lightbox.classList.add("schovany");
});

Novinky:

• querySelectorAll(".galerie img") – najdi všechny prvky, které sedí na CSS selektor (stejný zápis jako v CSS!). Vrátí seznam.
• forEach((fotka) => { ... }) – „pro každou položku seznamu udělej tohle”. Smyčka – další základní kámen programování.
• fotka.src – adresa obrázku. Zkopírujeme ji z malé fotky do velké.

Teraz ty 💪

1. Přidej lightbox do svého webu podle ukázky. Galerii už máš z Poziomy 1 – jen dbej na to, aby selektor (.galerie img) odpovídal tvým třídám.
2. Vylepšení pro odvážné – listování šipkami:

const fotky = document.querySelectorAll(".galerie img");
const lightbox = document.getElementById("lightbox");
const lightboxFoto = document.getElementById("lightbox-foto");
let aktualni = 0;

function ukazFotku(cislo) {
  // Ošetři přetečení: za poslední fotkou je zase první
  if (cislo < 0) cislo = fotky.length - 1;
  if (cislo >= fotky.length) cislo = 0;

  aktualni = cislo;
  lightboxFoto.src = fotky[aktualni].src;
  lightboxFoto.alt = fotky[aktualni].alt;
}

fotky.forEach((fotka, poradi) => {
  fotka.addEventListener("click", () => {
    ukazFotku(poradi);
    lightbox.classList.remove("schovany");
  });
});

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

// Listování klávesnicí
document.addEventListener("keydown", (udalost) => {
  if (lightbox.classList.contains("schovany")) return;

  if (udalost.key === "ArrowRight") ukazFotku(aktualni + 1);
  if (udalost.key === "ArrowLeft") ukazFotku(aktualni - 1);
  if (udalost.key === "Escape") lightbox.classList.add("schovany");
});

Náměty podle projektu: 🏫 fotky ze školních akcí · 🙋 tvoje výtvory a zážitky · 🌍 fotky z výletů (tady lightbox zazáří!) · ⚽ momentky ze zápasů.

Co si z téhle lekce odnést

• querySelectorAll() najde všechny prvky podle CSS selektoru, forEach je projde jeden po druhém.
• Lightbox = schovaný <div> přes celou stránku (position: fixed; inset: 0) + přepínání třídy schovany.
• Funkce function jmeno() {...} je pojmenovaný balíček kódu na opakované použití.

© 2026 Ing. Martin Polak / AlgoRhino · Warunki użytkowania treści