From 6c4ed83ac507ea1d444f6ef5fe180e64b5423aec Mon Sep 17 00:00:00 2001 From: Michael Stangl Date: Mon, 24 Aug 2026 16:37:31 +0200 Subject: [PATCH] =?UTF-8?q?Bildervorschau=20als=20Slider=20f=C3=BCr=20jede?= =?UTF-8?q?=20Fehrienwohnung?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layouts/ferienwohnungen/single.html | 23 +++++-- static/css/style.css | 96 ++++++++++++++++++++--------- static/js/main.js | 40 ++++++++++++ 3 files changed, 125 insertions(+), 34 deletions(-) diff --git a/layouts/ferienwohnungen/single.html b/layouts/ferienwohnungen/single.html index 2c5d857..729c446 100644 --- a/layouts/ferienwohnungen/single.html +++ b/layouts/ferienwohnungen/single.html @@ -11,12 +11,23 @@ {{ with .Params.bilder }} -
- {{ range . }} - - Foto - - {{ end }} +
+ +
+ {{ range $i, $img := . }} + + {{ $.Title }} – Foto {{ add $i 1 }} + + {{ end }} +
+ +
+ + {{ end }} diff --git a/static/css/style.css b/static/css/style.css index b186431..66cadcc 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -12,11 +12,6 @@ --radius: 8px; --max-width: 1100px; --nav-height: 64px; - - /* ===== SCHALTER: Hintergrund hinter "Herzlich Willkommen" ===== - Genau EINE der beiden Zeilen aktiv lassen, die andere auskommentieren: */ - /* --welcome-bg: url('/images/haus/Wolframm-Fewo-Kaufbeuren-Ferienwohnung-Ferienwohnungen-Wohnungen-mieten-87600-allgaeu-Titel.jpg'); */ /* Biene */ - --welcome-bg: url('/images/background-flowers.jpg'); /* Blumen */ } @media (prefers-color-scheme: dark) { @@ -166,30 +161,24 @@ img { max-width: 100%; height: auto; display: block; } /* ===== Willkommen ===== */ .welcome { - background-image: var(--welcome-bg); - background-size: cover; - background-position: center; - background-repeat: no-repeat; + background: var(--bg-alt); padding: 5rem 1.5rem; text-align: center; } .welcome-inner { max-width: 720px; margin: 0 auto; - background: rgba(255,255,255,0.80); - padding: 2.5rem 2rem; - border-radius: var(--radius); - color: #333; + color: var(--text); } .welcome h1 { - color: #e08309; + color: var(--primary); font-size: 2.6rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; } -.welcome-sub { font-size: 1.3rem; font-weight: 600; color: #333; margin-bottom: 1.5rem; } +.welcome-sub { font-size: 1.3rem; font-weight: 600; color: var(--text); margin-bottom: 1.5rem; } .welcome-text { font-size: 1.05rem; line-height: 1.7; } .welcome-text p { margin-bottom: 1rem; } .welcome-cta { margin-top: 1.5rem; } @@ -398,21 +387,72 @@ img { max-width: 100%; height: auto; display: block; } .slider--single .slider-slide { height: 280px; } } -/* ===== Galerie ===== */ -.galerie { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 0.75rem; - margin-bottom: 2rem; +/* FeWo-Galerie: 4 Bilder nebeneinander, Klick öffnet Lightbox */ +.slider--quad { margin-bottom: 2rem; } +.slider--quad .slider-slide { + flex: 0 0 calc((100% - 3 * 0.75rem) / 4); + width: calc((100% - 3 * 0.75rem) / 4); + height: 200px; } -.galerie-img { - width: 100%; - height: 160px; - object-fit: cover; - border-radius: var(--radius); - transition: opacity 0.2s; +@media (max-width: 900px) { + .slider--quad .slider-slide { + flex-basis: calc((100% - 0.75rem) / 2); + width: calc((100% - 0.75rem) / 2); + height: 180px; + } +} +@media (max-width: 480px) { + .slider--quad .slider-slide { flex-basis: 100%; width: 100%; height: 220px; } +} + +/* Lightbox */ +.lightbox { + position: fixed; + inset: 0; + z-index: 1000; + background: rgba(0,0,0,0.92); + display: flex; + align-items: center; + justify-content: center; +} +.lightbox[hidden] { display: none; } +.lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius); } +.lightbox-close { + position: absolute; + top: 1rem; + right: 1.25rem; + background: none; + border: none; + color: #fff; + font-size: 2.25rem; + line-height: 1; + cursor: pointer; +} +.lightbox-close:hover { color: var(--primary); } +.lightbox-arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 3rem; + height: 3rem; + border-radius: 50%; + border: none; + background: rgba(255,255,255,0.15); + color: #fff; + font-size: 1.25rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} +.lightbox-arrow:hover { background: var(--primary); } +.lightbox-prev { left: 1rem; } +.lightbox-next { right: 1rem; } +@media (max-width: 600px) { + .lightbox-arrow { width: 2.5rem; height: 2.5rem; } + .lightbox-prev { left: 0.5rem; } + .lightbox-next { right: 0.5rem; } } -.galerie-link:hover .galerie-img { opacity: 0.85; } /* ===== Buchung ===== */ .buchung { diff --git a/static/js/main.js b/static/js/main.js index 034c56e..a1880ba 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -25,3 +25,43 @@ document.querySelectorAll('.slider').forEach(slider => { if (prev) prev.addEventListener('click', () => track.scrollBy({ left: -step(), behavior: 'smooth' })); if (next) next.addEventListener('click', () => track.scrollBy({ left: step(), behavior: 'smooth' })); }); + +// Lightbox für Bildergalerien (Ferienwohnungen) +const lightboxGallery = document.querySelector('.lightbox-gallery'); +const lightbox = document.querySelector('.lightbox'); +if (lightboxGallery && lightbox) { + const triggers = Array.from(lightboxGallery.querySelectorAll('.lightbox-trigger')); + const images = triggers.map(a => ({ src: a.href, alt: a.querySelector('img').alt })); + const imgEl = lightbox.querySelector('.lightbox-img'); + const closeBtn = lightbox.querySelector('.lightbox-close'); + const prevBtn = lightbox.querySelector('.lightbox-prev'); + const nextBtn = lightbox.querySelector('.lightbox-next'); + let current = 0; + + const show = i => { + current = (i + images.length) % images.length; + imgEl.src = images[current].src; + imgEl.alt = images[current].alt; + }; + const open = i => { + show(i); + lightbox.hidden = false; + document.body.style.overflow = 'hidden'; + }; + const close = () => { + lightbox.hidden = true; + document.body.style.overflow = ''; + }; + + triggers.forEach((a, i) => a.addEventListener('click', e => { e.preventDefault(); open(i); })); + closeBtn.addEventListener('click', close); + prevBtn.addEventListener('click', () => show(current - 1)); + nextBtn.addEventListener('click', () => show(current + 1)); + lightbox.addEventListener('click', e => { if (e.target === lightbox) close(); }); + document.addEventListener('keydown', e => { + if (lightbox.hidden) return; + if (e.key === 'Escape') close(); + if (e.key === 'ArrowLeft') show(current - 1); + if (e.key === 'ArrowRight') show(current + 1); + }); +}