andre/fitme3070.pt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(site): auto-scrolling gallery strip (full-height + 2x2), centre-of-screen hover state, trial link as text under the hero button

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Sonnet 5.5 committed 2026-10-13 18:44:31 +01:00
1 parent 99c28f04b4
commit 6c14e644b1
4 files changed
+199 -915
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

site/includes/gallery.php
+49 -24
View File
@@ -1,11 +1,11 @@
<?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).
// Gallery partial — an endless horizontal strip that scrolls by itself (home
// "instalações" and the CrossFit page). Pure CSS: full-height photos alternate
// with 2x2 grids of four; the strip is repeated so the loop is seamless and it
// pauses on hover / focus. With "reduce motion" it becomes a plain swipeable
// row. Clicking a tile opens it full size in a <dialog> lightbox with prev /
// next, arrow keys, Esc and swipe (main.js); the repeated copies are hidden
// from assistive tech and open the same photo.
$files = glob(rtrim($gallery_path, '/') . '/*.jpg');
if (!$files || !is_array($files)) $files = [];
// Column span per tile, cycled: w = two columns, s = one.
@@ -21,23 +21,48 @@ $gal_label = $gallery_h2 ?? 'Instalações';
</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>
<?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 several times so the endless scroll has no gap: two
// copies is enough for a normal gallery, a short one needs four.
$copies = $n >= 8 ? 2 : 4;
$dur = max(30, $n * 5); // seconds for one pass over the originals
?>
<div class="gal-wrap">
<div class="gal-marquee" style="--gal-copies: <?= $copies ?>; --gal-dur: <?= $dur * $copies ?>s">
<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">
</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">&times;</button>