NEusortierung der Eigenschaften der Ferienwohnungen.

This commit is contained in:
Michael Stangl
2026-08-24 17:57:45 +02:00
parent 6c4ed83ac5
commit 9a3cbc4de2
13 changed files with 312 additions and 116 deletions
+6 -6
View File
@@ -32,7 +32,7 @@ iwz/
│ └── ferienwohnungen/
│ ├── _index.md
│ ├── fewo1.md # 45 qm, bis 4 Pers., 60 €/Nacht
│ ├── fewo2.md # 40 qm, bis 2 Pers., 55 €/Nacht
│ ├── fewo2.md # 40 qm, bis 3 Pers., 55 €/Nacht
│ └── fewo3.md # 56 qm, bis 5 Pers., 100 €/Nacht
├── layouts/ # Hugo-Templates (kein externes Theme!)
│ ├── index.html # Startseite: Hero, Highlights, FeWo-Karten
@@ -67,11 +67,11 @@ bilder:
## Noch offen / TODO
- [ ] Echte webplanner.de-URLs in fewo1/2/3.md eintragen (`belegungsplan`)
- [ ] Fotos in `static/images/` ablegen + in fewoX.md verlinken
- [ ] Telefon, E-Mail, Adresse in `hugo.toml` unter `[params]` eintragen
- [ ] `content/impressum.md` mit echten Pflichtangaben füllen
- [ ] `content/datenschutz.md` durch rechtskonforme Version ersetzen
- [x] Echte webplanner.de-URLs in fewo1/2/3.md eintragen (`belegungsplan`)
- [x] Fotos in `static/images/` ablegen + in fewoX.md verlinken
- [x] Telefon, E-Mail, Adresse in `hugo.toml` unter `[params]` eintragen
- [x] `content/impressum.md` mit echten Pflichtangaben füllen
- [x] `content/datenschutz.md` durch rechtskonforme Version ersetzen
- [ ] Cloudflare-Account anlegen + Wrangler einrichten (`wrangler login`)
- [ ] Nameserver bei IONOS auf Cloudflare umstellen
+71
View File
@@ -1,6 +1,77 @@
---
title: "Unsere Ferienwohnungen"
description: "Drei komfortable Ferienwohnungen in Kaufbeuren-Hirschzell"
allgemein:
- titel: "Sicherheit"
punkte:
- "Rauchmelder"
- "Verbandskasten"
- titel: "Eigenschaften"
punkte:
- "Seniorengerecht"
- "Nichtraucher"
- "Allergikergeeignet"
- "bedingt barrierefrei"
- "Haustiere nicht erlaubt"
- titel: "Für die Kleinen"
punkte:
- "Kinderhochstuhl"
- "Wickelkommode"
- "Wickelauflage"
- "Babybett (Reisebett)"
- "Kindertritt"
- "Baby-Badewanne"
umfeld:
- titel: "Im Grünen"
punkte:
- "Terrasse"
- "Gartenmöbel"
- "Sonnenschirm"
- titel: "Entfernungen"
punkte:
- "Ortsmitte: 3,0 km"
- "Bäcker: 1,3 km"
- "Supermarkt: 0,8 km"
- "Restaurant: 2,0 km"
- "Arzt: 200 m"
- "Apotheke: 3,0 km"
- "Tankstelle: 2,0 km"
- "Autobahn: 20 km"
- "Bahnhof: 2,0 km"
- "Bushaltestelle: 250 m"
- "Flughafen: 45 km"
- titel: "Spiel, Sport, Spaß"
punkte:
- "Tischtennis"
- "Spielplatz"
- titel: "Fuhrpark"
punkte:
- "PKW-Stellplatz"
gemeinsam:
- titel: "Wohnen und Leben"
punkte:
- "Heizung/Zentralheizung"
- "Fliegenschutzgitter"
- "Flachbildfernseher"
- "Kabel-TV"
- "Radio"
- "Internet WLAN"
- titel: "Bad und Sanitär"
punkte:
- "Dusche"
- "Waschbecken"
- "Spiegel"
- "Haartrockner"
- "WC"
- titel: "Haushaltshilfen"
punkte:
- "Bügelbrett"
- "Bügeleisen"
- "Staubsauger"
- "Wäschewaschen möglich"
- "Wäscheständer"
- "Wäschetrockner"
- "Putzmittel"
---
Alle drei Wohnungen sind vollständig ausgestattet, allergikerfreundlich und familientauglich.
+25 -33
View File
@@ -5,8 +5,31 @@ groesse: "45 qm"
personen: 4
preis: 60
weight: 1
belegungsplan: "https://www.webplanner.de/XXXXXX/fewo1"
belegungsplan: "https://www.webplanner.de/tools/mailer.php?lang=de&tsBeginDate=&tsEndDate=&fewoID=11823&fewoOwnID=3542&f="
teaser: "Lichtdurchflutete Wohnung mit weitem Blick über den Ort ins Grüne. Romantisches Doppelbett im Schlafzimmer, zusätzliche Schlafplätze im Wohnbereich."
vorschau: "/images/fewo1/ferienwohnung-1-wolframm-kaufbeuren-Kueche.jpg"
ausstattung:
- titel: "Schlafplätze"
punkte:
- "1 Doppelbett (180×200 cm)"
- "1 Zustellbett (80×190 cm)"
- "1 Einzelbett (90×200 cm)"
- titel: "Kochen und Essen"
punkte:
- "Elektroherd"
- "Backofen"
- "Dunstabzugshaube"
- "Geschirrspüler"
- "Kühlschrank"
- "Gefriertruhe"
- "Kaffeemaschine (Filter)"
- "Wasserkocher"
- "Toaster"
- "Mixer"
- "Mikrowelle"
- "Esstisch/Essecke"
- "Geschirr"
- "Geschirrhandtücher"
bilder:
- "/images/fewo1/ferienwohnung-1-wolframm-kaufbeuren-Wohnzimmer.jpg"
- "/images/fewo1/ferienwohnung-1-wolframm-kaufbeuren-schlafzimmer.jpg"
@@ -17,35 +40,4 @@ bilder:
- "/images/fewo1/ferienwohnung-1-wolframm-kaufbeuren-Skizze.jpg"
---
Lichtdurchflutete Wohnung mit weitem Blick über den Ort ins Grüne. Romantisches Doppelbett im Schlafzimmer, zusätzliche Schlafplätze im Wohnbereich.
## Ausstattung
**Schlafen**
- Doppelbett (180×200 cm)
- Einzelbett
- Zustellbett auf Anfrage
- Babybett
**Küche**
- Geschirrspüler
- Backofen
- Mikrowelle
- Kaffeemaschine
- Gefriertruhe
**Wohnen & Technik**
- Flachbildfernseher
- WLAN (kostenlos)
- Balkon / Terrasse
**Bad**
- Dusche
- Föhn
- Handtücher inklusive
**Für Kinder & Babys**
- Hochstuhl
- Wickelkommode
- Babybett
- Kinderbadewanne
In Wohnung 1 finden auf 45 qm Fläche bis zu 4 Personen Platz. Das romantische Doppelbett im Schlafzimmer wird durch ein Einzelbett im Wohnraum und ggf. ein weiteres Zustellbett dort ergänzt. Babyausstattung (Reisebett, Hochstuhl, Wickelmöglichkeit) ist möglich. Die lichtdurchflutete Wohnung profitiert von ihrer Ausrichtung nach Südwesten und erlaubt einen weiten Blick über den Ort ins Grüne. Eine komplett ausgestattete Küchenzeile samt Gefrierschrank und Spülmaschine setzt Ihren kulinarischen Kreationen keine Grenzen.
+25 -25
View File
@@ -1,18 +1,38 @@
---
title: "Ferienwohnung 2"
description: "40 qm, bis 2 Personen, ab 55 € pro Nacht"
description: "40 qm, bis 3 Personen, ab 55 € pro Nacht"
groesse: "40 qm"
personen: 2
personen: 3
preis: 55
weight: 2
belegungsplan: "https://www.webplanner.de/XXXXXX/fewo2"
belegungsplan: "https://www.webplanner.de/tools/mailer.php?lang=de&tsBeginDate=&tsEndDate=&fewoID=11824&fewoOwnID=3542&f="
teaser: "Gemütliche Wohnung ideal für Paare und Einzelreisende. Ruhige Lage mit Blick in den Garten."
ausstattung:
- titel: "Schlafplätze"
punkte:
- "2 Einzelbetten (90×200 cm)"
- "1 Zustellbett (80×190 cm)"
- titel: "Kochen und Essen"
punkte:
- "Elektroherd"
- "Backofen"
- "Dunstabzugshaube"
- "Mikrowelle"
- "Kühlschrank"
- "Gefrierfach"
- "Kaffeemaschine (Filter)"
- "Wasserkocher"
- "Toaster"
- "Mixer"
- "Esstisch/Essecke"
- "Geschirr"
- "Geschirrhandtücher"
bilder:
- "/images/fewo2/Wohn-esszimmer-Front-fewo-2.jpg"
- "/images/fewo2/Wohnzimmer-TV-und-Schrank-fewo-2.jpg"
- "/images/fewo2/Essplatz-fewo-2.jpg"
- "/images/fewo2/Wohnung-2-Kueche-frontal-1.jpg"
- "/images/fewo2/ferienwohnung-2-wolframm-kaufbeuren-Kueche-Wohnzimmer.jpg"
- "/images/fewo2/ferienwohnung-2-wolframm-kaufbeuren-Kueche-wohnung-mieten-Wohnkueche.jpg"
- "/images/fewo2/ferienwohnung-2-wolframm-kaufbeuren-Kueche-wohnung-mieten.jpg"
- "/images/fewo2/FeWo2-Bad-mit-Vorhang_2.jpg"
- "/images/fewo2/ferienwohnung-2-wolframm-kaufbeuren-flur.jpg"
@@ -20,24 +40,4 @@ bilder:
- "/images/fewo2/ferienwohnung-2-wolframm-kaufbeuren-skizze.jpg"
---
Gemütliche Wohnung ideal für Paare und Einzelreisende. Ruhige Lage mit Blick in den Garten.
## Ausstattung
**Schlafen**
- Doppelbett (160×200 cm)
**Küche**
- Backofen
- Mikrowelle
- Kaffeemaschine
- Kühlschrank mit Gefrierfach
**Wohnen & Technik**
- Flachbildfernseher
- WLAN (kostenlos)
**Bad**
- Dusche
- Föhn
- Handtücher inklusive
In unserer Wohnung 2 finden auf einer Fläche von ca. 40 qm bis zu 3 Personen Platz. 2 Einzelbetten im Schlafzimmer können bei Bedarf um ein Beistellbett in einem der anderen Räume ergänzt werden. Die vollausgestattete Küche lässt keine Wünsche offen und bietet Ihnen neben der üblichen gehobenen Ausstattung auch einen Kühlschrank mit Gefrierfach und eine Mikrowelle. Der Blick nach Nordwesten schweift ins Grüne. Im Winter ist so die Beobachtung auch selten gewordener Wildvögel am Futterhaus möglich.
+26 -34
View File
@@ -5,8 +5,32 @@ groesse: "56 qm"
personen: 5
preis: 100
weight: 3
belegungsplan: "https://www.webplanner.de/XXXXXX/fewo3"
belegungsplan: "https://www.webplanner.de/tools/mailer.php?lang=de&tsBeginDate=&tsEndDate=&fewoID=11825&fewoOwnID=3542&f="
teaser: "Unsere größte Wohnung – ideal für Familien mit Kindern oder kleine Gruppen. Großzügiger Wohnbereich, zwei Schlafzimmer, große Terrasse."
vorschau: "/images/fewo3/ferienwohnung-3-wolframm-kaufbeuren-Kueche.jpg"
ausstattung:
- titel: "Schlafplätze"
punkte:
- "4 Einzelbetten (90×200 cm)"
- "1 Zustellbett (80×190 cm)"
- titel: "Kochen und Essen"
punkte:
- "Elektroherd"
- "Backofen"
- "Dunstabzugshaube"
- "Kühlschrank"
- "Gefrierfach"
- "Kaffeemaschine (Filter)"
- "Wasserkocher"
- "Toaster"
- "Mixer"
- "Mikrowelle"
- "Esstisch/Essecke"
- "Geschirr"
- "Geschirrhandtücher"
- titel: "Besonderheit"
punkte:
- "Kinderfreundlich"
bilder:
- "/images/fewo3/ferienwohnung-allgaeu-kaufbeuren-wohnung-3-Kueche-Sitzecke-fewo.jpg"
- "/images/fewo3/ferienwohnung-allgaeu-kaufbeuren-wohnung-3-Kueche-fewo.jpg"
@@ -21,36 +45,4 @@ bilder:
- "/images/fewo3/ferienwohnung-3-wolframm-kaufbeuren-Skizze.jpg"
---
Unsere größte Wohnung – ideal für Familien mit Kindern oder kleine Gruppen. Großzügiger Wohnbereich, zwei Schlafzimmer, große Terrasse.
## Ausstattung
**Schlafen**
- Doppelbett (180×200 cm)
- 2× Einzelbett
- Zustellbett möglich
**Küche**
- Geschirrspüler
- Backofen
- Mikrowelle
- Kaffeemaschine
- Kühlschrank mit Gefrierfach
**Wohnen & Technik**
- Flachbildfernseher
- WLAN (kostenlos)
- Große Terrasse
- Gartennutzung
**Bad**
- Dusche
- Badewanne
- Föhn
- Handtücher inklusive
**Für Kinder & Babys**
- Hochstuhl
- Wickelkommode
- Babybett
- Spielzeug
In unserer Wohnung 3 finden auf einer Fläche von ca. 56 qm bis zu 5 Personen in 2 Schlafzimmern Platz. Jeweils 2 Einzelbetten können durch ein Beistellbett im größeren Schlafzimmer ergänzt werden. Babyausstattung bei Bedarf ist möglich. Eine umfangreich bestückte Küchenzeile erlaubt Ihnen die Selbstversorgung wie zu Hause. Die Wohnung liegt im EG. Per Anstellrampe können ggf. auch Gehbehinderte eine niedrige Stufe überwinden. Zwischen etwa 7 und 19 Uhr können Sie von der Wohnung aus unsere drei Laufenten im direkt an die Wohnung angrenzenden Freilauf beobachten. Der Blick in nordöstliche Richtung schweift ins Grüne.
+3 -3
View File
@@ -7,9 +7,9 @@ description: "Unsere Preise und Buchungsbedingungen"
| Wohnung | Größe | Personen | Preis/Nacht |
|---|---|---|---|
| Ferienwohnung 1 | 45 qm | bis 2 Pers. | ab 60 € |
| Ferienwohnung 2 | 40 qm | bis 2 Pers. | ab 55 € |
| Ferienwohnung 3 | 56 qm | bis 4 Pers. | ab 100 € |
| Ferienwohnung 1 | 45 qm | bis 4 Pers. | ab 60 € |
| Ferienwohnung 2 | 40 qm | bis 3 Pers. | ab 55 € |
| Ferienwohnung 3 | 56 qm | bis 5 Pers. | ab 100 € |
Jede weitere Person: **15 € / Nacht** · Kinder unter 12 Jahren: **12 € / Nacht**
+12 -4
View File
@@ -5,6 +5,7 @@
{{ .Content }}
{{ range .Params.galerien }}
{{ $titel := .titel }}
<section class="ausflug-gruppe">
<div class="ausflug-inner">
<div class="ausflug-text">
@@ -18,12 +19,12 @@
</div>
<div class="ausflug-bild">
<div class="slider slider--single">
<div class="slider slider--single lightbox-gallery">
<button type="button" class="slider-arrow slider-prev" aria-label="Zurück">&#10094;</button>
<div class="slider-track">
{{ range .bilder }}
<a href="{{ . }}" class="slider-slide">
<img src="{{ . }}" alt="{{ $.Title }}" loading="lazy">
{{ range $i, $img := .bilder }}
<a href="{{ $img }}" target="_blank" rel="noopener" class="slider-slide lightbox-trigger">
<img src="{{ $img }}" alt="{{ $titel }} – Foto {{ add $i 1 }}" loading="lazy">
</a>
{{ end }}
</div>
@@ -33,6 +34,13 @@
</div>
</section>
{{ end }}
<div class="lightbox" hidden>
<button type="button" class="lightbox-close" aria-label="Schließen">&times;</button>
<button type="button" class="lightbox-arrow lightbox-prev" aria-label="Vorheriges Bild">&#10094;</button>
<img class="lightbox-img" src="" alt="">
<button type="button" class="lightbox-arrow lightbox-next" aria-label="Nächstes Bild">&#10095;</button>
</div>
</div>
</article>
{{ end }}
+63 -1
View File
@@ -2,6 +2,14 @@
<div class="container">
<h1>{{ .Title }}</h1>
{{ .Content }}
<div class="belegungsplan-toggle">
<button type="button" class="btn btn-primary" id="belegungsplan-btn" aria-expanded="false" aria-controls="belegungsplan-frame">
Belegungsplan – hier freie Kapazitäten einsehen
</button>
<div class="belegungsplan-frame" id="belegungsplan-frame" data-src="https://www.webplanner.de/tools/?76703072363837353064343069" hidden></div>
</div>
<div class="fewo-grid">
{{ range .Pages }}
<div class="fewo-card">
@@ -15,11 +23,65 @@
{{ with .Params.personen }}<span>bis {{ . }} Personen</span>{{ end }}
{{ with .Params.preis }}<span>ab {{ . }} € / Nacht</span>{{ end }}
</p>
<p>{{ .Summary }}</p>
{{ with .Params.teaser }}<p>{{ . }}</p>{{ end }}
<a href="{{ .Permalink }}" class="btn">Mehr erfahren</a>
</div>
</div>
{{ end }}
</div>
{{ if or .Params.allgemein .Params.umfeld .Params.gemeinsam }}
<div class="umfeld" id="umfeld">
<p class="umfeld-intro">Diese Ausstattung und Umgebungsinfos gelten für alle drei Ferienwohnungen gleichermaßen.</p>
{{ with .Params.allgemein }}
<section class="umfeld-gruppe">
<h2>Allgemein</h2>
<div class="spec-grid">
{{ range . }}
<div class="spec-block">
<h3>{{ .titel }}</h3>
<ul>
{{ range .punkte }}<li>{{ . }}</li>{{ end }}
</ul>
</div>
{{ end }}
</div>
</section>
{{ end }}
{{ with .Params.umfeld }}
<section class="umfeld-gruppe">
<h2>Umfeld</h2>
<div class="spec-grid">
{{ range . }}
<div class="spec-block">
<h3>{{ .titel }}</h3>
<ul>
{{ range .punkte }}<li>{{ . }}</li>{{ end }}
</ul>
</div>
{{ end }}
</div>
</section>
{{ end }}
{{ with .Params.gemeinsam }}
<section class="umfeld-gruppe">
<h2>Gemeinsame Ausstattung</h2>
<div class="spec-grid">
{{ range . }}
<div class="spec-block">
<h3>{{ .titel }}</h3>
<ul>
{{ range .punkte }}<li>{{ . }}</li>{{ end }}
</ul>
</div>
{{ end }}
</div>
</section>
{{ end }}
</div>
{{ end }}
</div>
{{ end }}
+17
View File
@@ -35,6 +35,23 @@
{{ .Content }}
</div>
{{ with .Params.ausstattung }}
<section class="ausstattung">
<h2>Ausstattung</h2>
<div class="spec-grid">
{{ range . }}
<div class="spec-block">
<h3>{{ .titel }}</h3>
<ul>
{{ range .punkte }}<li>{{ . }}</li>{{ end }}
</ul>
</div>
{{ end }}
</div>
<p class="ausstattung-hinweis">Allgemeine Ausstattung (Sicherheit, Eigenschaften, für die Kleinen), Umfeld (Garten, Freizeit, Entfernungen) und weitere gemeinsame Ausstattung finden Sie unter <a href="/ferienwohnungen/#umfeld">Allgemein, Umfeld &amp; gemeinsame Ausstattung</a> aller Ferienwohnungen.</p>
</section>
{{ end }}
{{ with .Params.belegungsplan }}
<div class="buchung">
<h2>Verfügbarkeit &amp; Buchung</h2>
+32 -2
View File
@@ -259,6 +259,11 @@ img { max-width: 100%; height: auto; display: block; }
.highlight-card h3 { margin-bottom: 0.5rem; font-size: 1.05rem; }
.highlight-card p { color: var(--text-muted); font-size: 0.9rem; }
/* ===== Belegungsplan (Übersicht ein-/ausblenden) ===== */
.belegungsplan-toggle { margin: 1rem 0 2.5rem; }
.belegungsplan-frame { margin-top: 1.5rem; }
.belegungsplan-frame[hidden] { display: none; }
/* ===== FeWo Grid ===== */
.fewo-preview { background: var(--bg-alt); padding: 4rem 0; }
.fewo-preview h2, .fewo-preview > .container > h2 { margin-bottom: 2rem; font-size: 1.8rem; }
@@ -305,8 +310,33 @@ img { max-width: 100%; height: auto; display: block; }
.fewo-header h1 { margin-bottom: 0.75rem; }
.fewo-content { margin: 2rem 0; }
.fewo-content h2 { margin: 1.5rem 0 0.5rem; font-size: 1.2rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
.fewo-content ul { padding-left: 1.5rem; }
.fewo-content li { margin-bottom: 0.2rem; }
/* ===== Karten-Grid (wiederverwendet für Umfeld + Ausstattung) ===== */
.spec-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
}
.spec-block {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
}
.spec-block h3 { color: var(--primary); font-size: 1.05rem; margin-bottom: 0.5rem; }
.spec-block ul { padding-left: 1.25rem; margin: 0; }
.spec-block li { margin-bottom: 0.2rem; }
/* ===== Umfeld (gemeinsame Ausstattung aller Ferienwohnungen) ===== */
.umfeld { margin-top: 3rem; scroll-margin-top: calc(var(--nav-height) + 1rem); }
.umfeld-intro { color: var(--text-muted); margin-bottom: 1.5rem; }
.umfeld-gruppe { margin-top: 2rem; }
.umfeld-gruppe:first-of-type { margin-top: 0; }
.umfeld-gruppe h2 { margin-bottom: 1rem; font-size: 1.4rem; color: var(--primary); }
/* ===== Ausstattung (einzelne Ferienwohnung) ===== */
.ausstattung { margin-top: 2rem; }
.ausstattung h2 { margin: 1.5rem 0 1rem; font-size: 1.2rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
.ausstattung-hinweis { margin-top: 1.5rem; font-size: 0.95rem; color: var(--text-muted); }
/* ===== Ausflugsziele-Gruppen ===== */
.ausflug-gruppe { margin-top: 3rem; }
Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

+31 -7
View File
@@ -26,16 +26,34 @@ document.querySelectorAll('.slider').forEach(slider => {
if (next) next.addEventListener('click', () => track.scrollBy({ left: step(), behavior: 'smooth' }));
});
// Lightbox für Bildergalerien (Ferienwohnungen)
const lightboxGallery = document.querySelector('.lightbox-gallery');
// Belegungsplan ein-/ausblenden (externes webplanner-Skript erst bei Klick nachladen)
const belBtn = document.getElementById('belegungsplan-btn');
const belFrame = document.getElementById('belegungsplan-frame');
if (belBtn && belFrame) {
const labelClosed = belBtn.textContent.trim();
let loaded = false;
belBtn.addEventListener('click', () => {
const willShow = belFrame.hidden;
if (willShow && !loaded) {
const script = document.createElement('script');
script.src = belFrame.dataset.src;
belFrame.appendChild(script);
loaded = true;
}
belFrame.hidden = !willShow;
belBtn.setAttribute('aria-expanded', String(willShow));
belBtn.textContent = willShow ? 'Belegungsplan ausblenden' : labelClosed;
});
}
// Lightbox für Bildergalerien (eine Lightbox, beliebig viele Galerien pro Seite)
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 }));
if (lightbox) {
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 images = [];
let current = 0;
const show = i => {
@@ -43,7 +61,9 @@ if (lightboxGallery && lightbox) {
imgEl.src = images[current].src;
imgEl.alt = images[current].alt;
};
const open = i => {
const open = (gallery, i) => {
images = Array.from(gallery.querySelectorAll('.lightbox-trigger'))
.map(a => ({ src: a.href, alt: a.querySelector('img').alt }));
show(i);
lightbox.hidden = false;
document.body.style.overflow = 'hidden';
@@ -53,7 +73,11 @@ if (lightboxGallery && lightbox) {
document.body.style.overflow = '';
};
triggers.forEach((a, i) => a.addEventListener('click', e => { e.preventDefault(); open(i); }));
document.querySelectorAll('.lightbox-gallery').forEach(gallery => {
Array.from(gallery.querySelectorAll('.lightbox-trigger')).forEach((a, i) => {
a.addEventListener('click', e => { e.preventDefault(); open(gallery, i); });
});
});
closeBtn.addEventListener('click', close);
prevBtn.addEventListener('click', () => show(current - 1));
nextBtn.addEventListener('click', () => show(current + 1));