mark/msos
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

In-post event gallery block + lightbox; mobile polish

Browse Source 
- Reusable "Photos from the event" grid (shows 5 thumbnails + "+N more") that
  opens a full-screen lightbox (arrows / keyboard / swipe / Esc); added to the
  Meet Student Slovenia 2024 post as the pattern
- New css/components/_lightbox.css + setupLightbox() in main.js (injects one
  shared overlay, wires any .js-lightbox grid)
- Mobile polish: gallery albums go single-column on phones, two on tablets;
  event-gallery grid 3-up on mobile; lightbox sizing/controls tuned for small
  screens

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-03 15:16:28 +02:00
1 parent 24c77e6171
commit 1f5e031be9
5 files changed
+183 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

en/projects/meet-student-slovenia-2024/index.html
+18
View File
@@ -319,6 +319,24 @@
</div>
<section class="event-gallery">
<h2 class="event-gallery-title">Photos from the event</h2>
<div class="event-gallery-grid js-lightbox">
<button type="button" class="eg-thumb" data-full="../../../images/event4-img-1.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-1.webp" alt="Meet Student Slovenia 2024 — photo 1"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event4-img-2.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-2.webp" alt="Meet Student Slovenia 2024 — photo 2"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event4-img-3.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-3.webp" alt="Meet Student Slovenia 2024 — photo 3"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event4-img-4.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-4.webp" alt="Meet Student Slovenia 2024 — photo 4"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event4-img-5.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-5.webp" alt="Meet Student Slovenia 2024 — photo 5"><span class="eg-more">+7</span></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event4-img-6.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-6.webp" alt="Meet Student Slovenia 2024 — photo 6"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event4-img-7.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-7.webp" alt="Meet Student Slovenia 2024 — photo 7"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event4-img-8.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-8.webp" alt="Meet Student Slovenia 2024 — photo 8"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event4-img-9.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-9.webp" alt="Meet Student Slovenia 2024 — photo 9"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event4-img-10.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-10.webp" alt="Meet Student Slovenia 2024 — photo 10"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event4-img-11.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-11.webp" alt="Meet Student Slovenia 2024 — photo 11"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event4-img-12.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../../images/event4-img-12.webp" alt="Meet Student Slovenia 2024 — photo 12"></button>
</div>
</section>
<footer class="article-footer">
<hr>
<div class="author-share-section">