94 lines
3.7 KiB
JavaScript
94 lines
3.7 KiB
JavaScript
/* =====================================================================
|
|
gallery.js — filterbare Mediengalerie + Lightbox (für medien.html)
|
|
|
|
MEDIA-Array unten mit echten Bildern befüllen sobald verfügbar
|
|
(assets/img/...). Bis dahin rendert jeder Eintrag ohne "src" einen
|
|
Platzhalter-Block mit passendem Alt-Text, damit die Struktur schon
|
|
steht und nur noch Bilder eingehängt werden müssen.
|
|
===================================================================== */
|
|
|
|
const MEDIA = [
|
|
{ id: 1, category: "dogfather", alt: "Dogfather Profilbild", src: "" },
|
|
{ id: 2, category: "dogfather", alt: "Dogfather beim Stream", src: "" },
|
|
{ id: 3, category: "team", alt: "Team Dogi Gruppenbild", src: "" },
|
|
{ id: 4, category: "team", alt: "Patrick (Scout)", src: "" },
|
|
{ id: 5, category: "team", alt: "Bananenstift (Scout)", src: "" },
|
|
{ id: 6, category: "team", alt: "VanVan", src: "" },
|
|
{ id: 7, category: "hasidog", alt: "HasiDog Logo/Maskottchen", src: "" },
|
|
{ id: 8, category: "hasidog", alt: "Husky Casper", src: "" },
|
|
{ id: 9, category: "hasidog", alt: "Casper & Kater Simba", src: "" },
|
|
{ id: 10, category: "manager", alt: "Spicy Media Logo", src: "" },
|
|
{ id: 11, category: "aktionen", alt: "Weihnachtsaktion Portugal", src: "" },
|
|
{ id: 12, category: "aktionen", alt: "VanVan Teddys Merch", src: "" },
|
|
// TODO: echte Bilder aus den vom User gelieferten Assets ergänzen
|
|
// (assets/img/... Pfad eintragen, dann wird automatisch das Bild
|
|
// statt des Platzhalters angezeigt).
|
|
];
|
|
|
|
function renderGalleryItem(item) {
|
|
const media = item.src
|
|
? `<img src="${item.src}" alt="${item.alt}" loading="lazy" />`
|
|
: `<div class="img-placeholder">${item.alt}<br><span class="small">Foto folgt</span></div>`;
|
|
return `
|
|
<figure class="gallery-item card" data-category="${item.category}" data-index="${item.id}">
|
|
${media}
|
|
<figcaption class="small muted" style="margin-top:.6rem;">${item.alt}</figcaption>
|
|
</figure>`;
|
|
}
|
|
|
|
function initGallery() {
|
|
const grid = document.getElementById("gallery-grid");
|
|
const filterBar = document.getElementById("gallery-filters");
|
|
if (!grid || !filterBar) return;
|
|
|
|
const categories = ["alle", ...new Set(MEDIA.map((m) => m.category))];
|
|
filterBar.innerHTML = categories
|
|
.map(
|
|
(c, i) =>
|
|
`<button class="filter-btn${i === 0 ? " active" : ""}" data-filter="${c}">${c[0].toUpperCase() + c.slice(1)}</button>`
|
|
)
|
|
.join("");
|
|
|
|
function draw(filter) {
|
|
const items = filter === "alle" ? MEDIA : MEDIA.filter((m) => m.category === filter);
|
|
grid.innerHTML = items.map(renderGalleryItem).join("") || `<p class="muted">Keine Bilder in dieser Kategorie.</p>`;
|
|
bindLightbox();
|
|
}
|
|
|
|
filterBar.addEventListener("click", (e) => {
|
|
const btn = e.target.closest(".filter-btn");
|
|
if (!btn) return;
|
|
filterBar.querySelectorAll(".filter-btn").forEach((b) => b.classList.remove("active"));
|
|
btn.classList.add("active");
|
|
draw(btn.dataset.filter);
|
|
});
|
|
|
|
function bindLightbox() {
|
|
const lb = document.getElementById("lightbox");
|
|
const lbContent = document.getElementById("lightbox-content");
|
|
if (!lb || !lbContent) return;
|
|
grid.querySelectorAll(".gallery-item").forEach((el) => {
|
|
el.addEventListener("click", () => {
|
|
lbContent.innerHTML = el.innerHTML;
|
|
lb.classList.add("open");
|
|
});
|
|
});
|
|
}
|
|
|
|
draw("alle");
|
|
|
|
const lb = document.getElementById("lightbox");
|
|
if (lb) {
|
|
lb.addEventListener("click", (e) => {
|
|
if (e.target === lb || e.target.closest(".lightbox-close")) {
|
|
lb.classList.remove("open");
|
|
}
|
|
});
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") lb.classList.remove("open");
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", initGallery);
|