New: Model template
This commit is contained in:
147
layouts/_default/model.html
Normal file
147
layouts/_default/model.html
Normal file
@@ -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 }}
|
||||
@@ -1,8 +1,15 @@
|
||||
{{ define "main" }}
|
||||
<article class="py-5">
|
||||
<h1 class="display-4 fw-bold">{{ .Title }}</h1>
|
||||
<div class="content mt-4">
|
||||
{{ .Content }}
|
||||
<section class="info-section">
|
||||
<div class="container">
|
||||
<div class="align-items-center">
|
||||
<article>
|
||||
{{ partial "hero-single.html" . }}
|
||||
<div class="content mt-4 col-md-11 mx-auto">
|
||||
{{ .Content | markdownify }}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user