77 lines
3.7 KiB
PHP
77 lines
3.7 KiB
PHP
<?php
|
|
// Gallery partial — an endless horizontal strip (home "instalações" and the
|
|
// CrossFit page): full-height photos alternate with 2x2 grids of four. main.js
|
|
// scrolls it by itself, lets you click-and-drag (mouse) or swipe (touch), pauses
|
|
// while you interact and loops seamlessly over the repeated copies. Clicking a
|
|
// tile (without dragging) opens it full size in a <dialog> lightbox with prev /
|
|
// next, arrow keys, Esc and swipe; the repeated copies are hidden from assistive
|
|
// tech and open the same photo.
|
|
// Every format the admin upload accepts (functions_galerias.php), not just .jpg.
|
|
$files = preg_grep('/\.(jpe?g|png|gif|webp|jxl)$/i', glob(rtrim($gallery_path, '/') . '/*') ?: []);
|
|
$files = array_values($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):
|
|
// Units of the strip: a full-height photo, then a 2x2 grid of four, and so on.
|
|
// (Fewer than four left over → a full-height photo.)
|
|
$units = []; $i = 0; $n = count($files); $k = 0;
|
|
while ($i < $n) {
|
|
$grid = ($k % 2 === 1) && ($n - $i >= 4);
|
|
$take = $grid ? 4 : 1;
|
|
$units[] = ['grid' => $grid, 'idx' => range($i, $i + $take - 1)];
|
|
$i += $take; $k++;
|
|
}
|
|
// The strip is rendered four times: main.js keeps the scroll position inside
|
|
// the middle copies and jumps by exactly one copy, so it loops without a seam.
|
|
$copies = 4;
|
|
?>
|
|
<div class="gal-wrap">
|
|
<div class="gal-marquee">
|
|
<div class="gal-track">
|
|
<?php for ($c = 0; $c < $copies; $c++): $dup = $c > 0; ?>
|
|
<div class="gal-set"<?= $dup ? ' aria-hidden="true"' : '' ?>>
|
|
<?php foreach ($units as $u): ?>
|
|
<div class="gal-unit <?= $u['grid'] ? 'gal-unit--grid' : 'gal-unit--full' ?>">
|
|
<?php foreach ($u['idx'] as $gi):
|
|
$f = $files[$gi];
|
|
$src = base_url($f);
|
|
$alt = $gal_label . ' — FitMe 3070, foto ' . ($gi + 1); // distinct alt per photo
|
|
$dim = @getimagesize($f) ?: [0, 0];
|
|
?>
|
|
<div class="gal-tile">
|
|
<a href="<?= htmlspecialchars($src) ?>" class="gal-link" data-index="<?= $gi ?>"<?= $dup ? ' data-dup="1" tabindex="-1"' : '' ?> aria-label="Ampliar: <?= htmlspecialchars($alt) ?>">
|
|
<img src="<?= htmlspecialchars($src) ?>" alt="<?= $dup ? '' : htmlspecialchars($alt) ?>"
|
|
<?= $dim[0] ? 'width="' . (int) $dim[0] . '" height="' . (int) $dim[1] . '"' : '' ?>
|
|
<?= $gi > 2 || $dup ? 'loading="lazy"' : '' ?> decoding="async" draggable="false">
|
|
</a>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
</div>
|
|
</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; ?>
|