New: Model template

2026-03-02 20:33:30 +01:00
parent f1aedfb218
commit 3aefa3ef04
60 changed files with 1348 additions and 112 deletions
--- a/layouts/_default/model.html
+++ b/layouts/_default/model.html
@@ -0,0 +1,147 @@
+{{ define "main" }}
+<section class="model-section py-4">
+    <div class="container">
+        <div class="row">
+            {{ partial "hero-model.html" . }}
+        </div>
+    </div>
+</section>
+
+{{ with .Params.gallery }}
+<div id="gallery-splide" class="splide mt-2" aria-label="Afbeeldingen van model {{ $.Title }}">
+    <div class="splide__track">
+        <ul class="splide__list">
+            {{ range . }}
+            <li class="splide__slide text-center">
+                <img src="{{ .image | relURL }}" 
+                    alt="{{ .alt }}" 
+                    class="img-fluid rounded-4 shadow-sm gallery-trigger" 
+                    style="height: 400px; object-fit: cover; cursor: pointer;"
+                    data-bs-toggle="modal" 
+                    data-bs-target="#lightboxModal"
+                    onclick="const bigImg = this.src.replace('800x', '3200x'); document.getElementById('lightboxImage').src = bigImg;">
+            </li>
+            {{ end }}
+        </ul>
+    </div>
+</div>
+{{ end }}
+
+<div class="modal fade" id="lightboxModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content bg-transparent border-0">
+            <div class="modal-body p-0">
+                <button type="button" class="btn-lightbox-close" data-bs-dismiss="modal">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+
+                <div id="lightbox-splide" class="splide">
+                    <div class="splide__track">
+                        <ul class="splide__list">
+                            {{ range .Params.gallery }}
+                            <li class="splide__slide text-center">
+                                {{ $bigImg := replace .image "800x" "3200x" }}
+                                <img data-splide-lazy="{{ $bigImg | relURL }}" class="img-fluid rounded-4" alt="{{ .alt }}">
+                            </li>
+                            {{ end }}
+                        </ul>
+                    </div>
+                    
+                    <div class="splide__arrows">
+                        <button class="splide__arrow splide__arrow--prev"><i class="bi bi-chevron-left"></i></button>
+                        <button class="splide__arrow splide__arrow--next"><i class="bi bi-chevron-right"></i></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="row">
+        <div class="col-11 mx-auto">
+            <div class="row g-5">
+                <div class="col-md-8">
+                    <article>
+                        <div class="content mt-4">
+                            {{ .Content }}
+                        </div>
+                </article>
+                </div>
+                <div class="col-md-4">
+                    <div class="card-secondary">
+                        <h4>Plattegrond bekijken</h4>
+                        <p>Maatwerk is mogelijk.</p>
+                        <div class="bg-white shadow p-4 rounded-4 mb-4">
+                            <img class="img-fluid" src="{{ .Params.plattegrond }}">
+                        </div>
+                        <a class="btn btn-cta">Download plattegrond</a>
+                        
+                    </div>
+                    
+                </div>
+            </div>       
+        </div>
+    </div>
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const mainGallery = document.querySelector('#gallery-splide');
+        const lightboxEl = document.querySelector('#lightbox-splide');
+        
+        if (mainGallery && lightboxEl) {
+            // 1. De thumbnail slider (gecombineerde instellingen)
+            const primarySplide = new Splide(mainGallery, {
+                type   : 'loop',
+                perPage: 4,
+                focus  : 'center',
+                perMove: 1,
+                padding: '1rem',
+                gap    : '2rem',
+                autoplay: true,
+                interval: 4000,
+                arrows : false,
+                pagination: true,
+                breakpoints: {
+                    1200: { perPage: 2, padding: '1rem' },
+                    768: { perPage: 1, padding: '2rem', gap: '1rem' }
+                }
+            }).mount();
+
+            // 2. De lightbox slider
+            const lightboxSplide = new Splide(lightboxEl, {
+                type: 'fade', 
+                rewind: true,
+                pagination: false,
+                lazyLoad: 'nearby' 
+            }).mount();
+
+            // 3. De koppeling
+            const modal = document.getElementById('lightboxModal');
+            const triggers = document.querySelectorAll('.gallery-trigger');
+
+            triggers.forEach((trigger, index) => {
+                trigger.addEventListener('click', (e) => {
+                    // We voorkomen dat de autoplay van de main gallery roet in het eten gooit
+                    primarySplide.Components.Autoplay.pause();
+                    
+                    // Splide index kan afwijken door 'loop' (clones)
+                    // We berekenen de echte index op basis van de data-index of positie
+                    lightboxSplide.go(index);
+                });
+            });
+            
+            // Refresh bij openen voor juiste rendering
+            modal.addEventListener('shown.bs.modal', function () {
+                lightboxSplide.refresh();
+            });
+
+            // Autoplay weer aanzetten als modal sluit
+            modal.addEventListener('hidden.bs.modal', function () {
+                primarySplide.Components.Autoplay.play();
+            });
+        }
+    });
+</script>
+{{ end }}