Bildervorschau als Slider für jede Fehrienwohnung
This commit is contained in:
Michael Stangl
@@ -11,12 +11,23 @@
|
||||
</div>
|
||||
|
||||
{{ with .Params.bilder }}
|
||||
<div class="galerie">
|
||||
{{ range . }}
|
||||
<a href="{{ . }}" class="galerie-link">
|
||||
<img src="{{ . }}" alt="Foto" class="galerie-img" loading="lazy">
|
||||
</a>
|
||||
{{ end }}
|
||||
<div class="slider slider--quad lightbox-gallery">
|
||||
<button type="button" class="slider-arrow slider-prev" aria-label="Zurück">❮</button>
|
||||
<div class="slider-track">
|
||||
{{ range $i, $img := . }}
|
||||
<a href="{{ $img }}" target="_blank" rel="noopener" class="slider-slide lightbox-trigger">
|
||||
<img src="{{ $img }}" alt="{{ $.Title }} – Foto {{ add $i 1 }}" loading="lazy">
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<button type="button" class="slider-arrow slider-next" aria-label="Weiter">❯</button>
|
||||
</div>
|
||||
|
||||
<div class="lightbox" hidden>
|
||||
<button type="button" class="lightbox-close" aria-label="Schließen">×</button>
|
||||
<button type="button" class="lightbox-arrow lightbox-prev" aria-label="Vorheriges Bild">❮</button>
|
||||
<img class="lightbox-img" src="" alt="">
|
||||
<button type="button" class="lightbox-arrow lightbox-next" aria-label="Nächstes Bild">❯</button>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
|
||||
+68
-28
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user