152 lines
6.8 KiB
Plaintext
152 lines
6.8 KiB
Plaintext
---
|
||
import { Image } from 'astro:assets';
|
||
import salon1 from '../assets/images/salon_1.jpg';
|
||
import salon2 from '../assets/images/salon_2.jpg';
|
||
import chambreRiviere1 from '../assets/images/chambre_riviere_1.jpg';
|
||
import chambreTilleul from '../assets/images/chambre_tilleul.jpg';
|
||
import petiteChambre from '../assets/images/petite_chambre.jpg';
|
||
import grenier from '../assets/images/grenier.jpg';
|
||
import cecile from '../assets/images/cecile.jpg';
|
||
import hamac from '../assets/images/hamac.jpg';
|
||
import terrasse from '../assets/images/terrasse.jpg';
|
||
import jardin from '../assets/images/jardin.jpg';
|
||
|
||
// Chaque photo a ses classes de span écrites en dur (Tailwind ne détecte pas les classes dynamiques)
|
||
const photos = [
|
||
{ src: salon1, alt: 'Le salon', caption: 'Le salon', cls: 'col-span-1 h-44 md:col-span-2 md:row-span-2 md:h-auto' },
|
||
{ src: salon2, alt: 'Le salon', caption: 'Le salon', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
|
||
{ src: chambreRiviere1, alt: 'Chambre Rivière', caption: 'Chambre Rivière · 1 lit 140×190', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
|
||
{ src: chambreTilleul, alt: 'Chambre Tilleul', caption: 'Chambre Tilleul · 1 lit 140×190', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
|
||
{ src: petiteChambre, alt: 'La petite chambre', caption: 'La petite chambre · 1 lit 90×190', cls: 'col-span-2 h-44 md:col-span-2 md:row-span-1 md:h-auto' },
|
||
{ src: grenier, alt: 'Le grenier', caption: 'Le grenier', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-2 md:h-auto' },
|
||
{ src: terrasse, alt: 'La terrasse', caption: 'La terrasse', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
|
||
{ src: jardin, alt: 'Le jardin', caption: 'Le jardin', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
|
||
{ src: hamac, alt: 'Espace détente', caption: 'Espace détente · Hamac', cls: 'col-span-2 h-44 md:col-span-2 md:row-span-1 md:h-auto' },
|
||
{ src: cecile, alt: 'Cécile', caption: 'Cécile sur son fauteuil, scrutant la nature…', cls: 'col-span-2 h-48 md:col-span-3 md:row-span-1 md:h-auto' },
|
||
];
|
||
---
|
||
|
||
<section id="gallery" class="py-32 scroll-mt-20 bg-gradient-to-b from-[#f7f3e8] via-[#f2efdf] to-[#e4ecd2] border-y border-[#d9d2c3]/70">
|
||
<div class="max-w-6xl mx-auto px-6">
|
||
|
||
<div class="mb-14 text-center">
|
||
<span class="block text-xs tracking-[0.3em] uppercase text-primary mb-4">Galerie</span>
|
||
<h2 class="font-serif text-5xl font-light">Découvrez le lieu</h2>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 md:auto-rows-[200px] grid-flow-dense">
|
||
{photos.map((photo, i) => (
|
||
<div
|
||
class:list={[
|
||
"overflow-hidden cursor-pointer group relative",
|
||
photo.cls,
|
||
]}
|
||
data-lightbox={i}
|
||
data-caption={photo.caption}
|
||
role="button"
|
||
tabindex="0"
|
||
aria-label={`Voir en grand : ${photo.alt}`}
|
||
>
|
||
<Image
|
||
src={photo.src}
|
||
alt={photo.alt}
|
||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 pointer-events-none"
|
||
/>
|
||
<div class="absolute inset-0 bg-dark/0 group-hover:bg-dark/30 transition-colors duration-300 flex items-end">
|
||
<span class="text-white/0 group-hover:text-white/90 transition-colors duration-300 text-xs tracking-[0.15em] uppercase px-4 pb-4">
|
||
{photo.caption}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Lightbox -->
|
||
<div
|
||
id="lightbox"
|
||
class="fixed inset-0 z-50 bg-black/90 items-center justify-center"
|
||
style="display:none"
|
||
aria-hidden="true"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label="Visionneuse de photos"
|
||
>
|
||
<button
|
||
id="lb-close"
|
||
class="absolute top-5 right-6 text-white/60 hover:text-white text-4xl font-light leading-none transition-colors"
|
||
aria-label="Fermer"
|
||
>×</button>
|
||
|
||
<button
|
||
id="lb-prev"
|
||
class="absolute left-4 md:left-8 top-1/2 -translate-y-1/2 text-white/60 hover:text-white text-6xl font-light leading-none transition-colors px-2"
|
||
aria-label="Photo précédente"
|
||
>‹</button>
|
||
|
||
<div class="flex flex-col items-center max-w-5xl w-full mx-auto px-20">
|
||
<img id="lb-img" src="" alt="" class="max-h-[80vh] max-w-full object-contain" />
|
||
<p id="lb-caption" class="mt-5 text-white/50 text-xs tracking-[0.25em] uppercase"></p>
|
||
</div>
|
||
|
||
<button
|
||
id="lb-next"
|
||
class="absolute right-4 md:right-8 top-1/2 -translate-y-1/2 text-white/60 hover:text-white text-6xl font-light leading-none transition-colors px-2"
|
||
aria-label="Photo suivante"
|
||
>›</button>
|
||
</div>
|
||
|
||
<script>
|
||
var lightbox = document.getElementById('lightbox');
|
||
var lbImg = document.getElementById('lb-img');
|
||
var lbCap = document.getElementById('lb-caption');
|
||
var lbClose = document.getElementById('lb-close');
|
||
var lbPrev = document.getElementById('lb-prev');
|
||
var lbNext = document.getElementById('lb-next');
|
||
var items = Array.from(document.querySelectorAll('[data-lightbox]'));
|
||
var current = 0;
|
||
|
||
function showAt(i) {
|
||
current = ((i % items.length) + items.length) % items.length;
|
||
var wrapper = items[current];
|
||
var img = wrapper.querySelector('img');
|
||
lbImg.src = img.currentSrc || img.src;
|
||
lbImg.alt = img.alt;
|
||
lbCap.textContent = wrapper.dataset.caption || '';
|
||
}
|
||
|
||
function openAt(i) {
|
||
showAt(i);
|
||
lightbox.style.display = 'flex';
|
||
lightbox.setAttribute('aria-hidden', 'false');
|
||
document.body.style.overflow = 'hidden';
|
||
lbClose.focus();
|
||
}
|
||
|
||
function closeLightbox() {
|
||
lightbox.style.display = 'none';
|
||
lightbox.setAttribute('aria-hidden', 'true');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
items.forEach(function(el, i) {
|
||
el.addEventListener('click', function() { openAt(i); });
|
||
el.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openAt(i); }
|
||
});
|
||
});
|
||
|
||
lbClose.addEventListener('click', closeLightbox);
|
||
lbPrev.addEventListener('click', function() { showAt(current - 1); });
|
||
lbNext.addEventListener('click', function() { showAt(current + 1); });
|
||
lightbox.addEventListener('click', function(e) { if (e.target === lightbox) closeLightbox(); });
|
||
|
||
document.addEventListener('keydown', function(e) {
|
||
if (lightbox.style.display === 'none') return;
|
||
if (e.key === 'Escape') closeLightbox();
|
||
if (e.key === 'ArrowLeft') showAt(current - 1);
|
||
if (e.key === 'ArrowRight') showAt(current + 1);
|
||
});
|
||
</script> |