andreandClaude Opus 5.5
d70f13aea0
- «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>
52 lines
2.6 KiB
PHP
52 lines
2.6 KiB
PHP
<?php
|
|
// Gallery partial — masonry (home "instalações" and the CrossFit page).
|
|
// main.js lays the tiles out itself: each photo keeps its own aspect ratio (no
|
|
// cropping) and drops into the shortest column; every few tiles one spans two
|
|
// columns, which is what staggers the heights — the photos are all landscape,
|
|
// so equal-width tiles alone would just form a grid. Without JS the list falls
|
|
// back to a plain CSS grid. Clicking a tile opens it full size in a <dialog>
|
|
// lightbox with prev / next, arrow keys, Esc and swipe (main.js).
|
|
$files = glob(rtrim($gallery_path, '/') . '/*.jpg');
|
|
if (!$files || !is_array($files)) $files = [];
|
|
// Column span per tile, cycled: w = two columns, s = one.
|
|
$gal_shapes = ['w', 's', 's', 's', 's', 'w', 's', 's', 's', 's', 's'];
|
|
$gal_label = $gallery_h2 ?? 'Instalações';
|
|
?>
|
|
<div class="row justify-content-md-center" style="margin-top: 58px">
|
|
<div class="col-lg-8">
|
|
<div class="section-title text-center deco">
|
|
<span class="section-eyebrow">Galeria</span>
|
|
<h2><?= htmlspecialchars($gallery_h2 ?? 'Galeria') ?></h2>
|
|
<p class="section-subtitle">Espaço amplo, equipamento moderno e um ambiente feito para treinar.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php if ($files): ?>
|
|
<div class="container">
|
|
<ul class="gal-masonry">
|
|
<?php foreach ($files as $gi => $f):
|
|
$src = base_url($f);
|
|
$alt = $gal_label . ' — FitMe 3070, foto ' . ($gi + 1); // distinct alt per photo
|
|
$dim = @getimagesize($f) ?: [0, 0];
|
|
?>
|
|
<li class="gal-tile gal-<?= $gal_shapes[$gi % count($gal_shapes)] ?>">
|
|
<a href="<?= htmlspecialchars($src) ?>" class="gal-link" data-index="<?= $gi ?>" aria-label="Ampliar: <?= htmlspecialchars($alt) ?>">
|
|
<img src="<?= htmlspecialchars($src) ?>" alt="<?= htmlspecialchars($alt) ?>"
|
|
<?= $dim[0] ? 'width="' . (int) $dim[0] . '" height="' . (int) $dim[1] . '"' : '' ?>
|
|
<?= $gi > 1 ? 'loading="lazy"' : '' ?> decoding="async">
|
|
</a>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
<dialog class="gal-lightbox" aria-label="<?= htmlspecialchars($gal_label) ?>">
|
|
<button type="button" class="gal-lb-close" aria-label="Fechar">×</button>
|
|
<button type="button" class="gal-lb-nav gal-lb-prev" aria-label="Foto anterior"><i class="fas fa-chevron-left" aria-hidden="true"></i></button>
|
|
<figure class="gal-lb-figure">
|
|
<img src="" alt="">
|
|
<figcaption class="gal-lb-count"></figcaption>
|
|
</figure>
|
|
<button type="button" class="gal-lb-nav gal-lb-next" aria-label="Foto seguinte"><i class="fas fa-chevron-right" aria-hidden="true"></i></button>
|
|
</dialog>
|
|
<?php endif; ?>
|