NEusortierung der Eigenschaften der Ferienwohnungen.

layouts/_default/ausflugsziele.html

@@ -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 }}