feat(galeria): masonry em JS com lightbox, em vez do slider

- «Conhece as nossas instalações» (e a galeria do CrossFit) passa de slider
  Splide a masonry: layout próprio em JS (sem biblioteca), fotos com a
  proporção original, coluna mais baixa primeiro e algumas a ocupar duas
  colunas (só quando não deixam buraco). Reorganiza ao mudar de largura
  (ResizeObserver + resize) e as fotos entram em cascata ao aparecer.
  Sem JS fica uma grelha CSS.
- Clicar abre a foto num <dialog>: anterior/seguinte, setas, Esc, deslizar.
- O Splide deixa de ser carregado (CSS e JS).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Opus 5.5 committed 2026-09-25 07:05:25 +01:00
1 parent cb0e4540f2
commit d70f13aea0
5 files changed
+379 -36

No files matched your search

-3
View File
@@ -46,9 +46,6 @@ $canonical = $GLOBALS['_canonical_override'] ?? base_url($page !== '' ? 'home/'
<!-- Vendor: Font Awesome 5 -->
<?= link_tag('site/assets/fonts/fontawesome/css/all.css') ?>
<!-- Vendor: Splide (gallery slider) — load BEFORE app styles so style.css wins -->
<link rel="stylesheet" href="<?= base_url('site/assets/js/splide/dist/css/splide.min.css') ?>">
<link rel="stylesheet" href="<?= base_url('site/assets/js/splide/dist/css/themes/splide-sea-green.min.css') ?>">
<!-- App styles (Bootstrap overrides) -->
<?= link_tag('site/assets/css/style.css') ?>