From b1ffa9050e63329ac72cfc9cca5b44800984e34c Mon Sep 17 00:00:00 2001 From: Ken D'Ambrosio Date: Sat, 9 May 2026 15:50:10 +0000 Subject: Add info overlay to lightbox showing photo metadata MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tap "ℹ Info" in the caption bar to toggle a semi-transparent panel at the bottom of the image showing filename (if different from title), date taken, and pixel dimensions. Panel resets to hidden on each photo change. Button is hidden automatically when no metadata is available. Width/height are now included in the ENTRIES payload. Co-Authored-By: Claude Sonnet 4.6 --- public/js/album.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'public/js') diff --git a/public/js/album.js b/public/js/album.js index d3a563a..9e921d7 100644 --- a/public/js/album.js +++ b/public/js/album.js @@ -30,6 +30,24 @@ function lbNav(delta) { } } +function lbToggleInfo() { + document.getElementById('lb-info-panel').classList.toggle('hidden'); +} + +function lbBuildInfo(e) { + const rows = []; + if (e.name !== e.title) rows.push(['File', e.name]); + if (e.taken_at) { + const d = new Date(e.taken_at); + rows.push(['Date', d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })]); + } + if (e.width && e.height) rows.push(['Dimensions', `${e.width} × ${e.height}`]); + document.getElementById('lb-info-dl').innerHTML = + rows.map(([k, v]) => `
${k}
${v}
`).join(''); + document.getElementById('lb-info-panel').classList.add('hidden'); + document.getElementById('lb-info-btn').style.display = rows.length ? '' : 'none'; +} + function renderLightbox() { const e = ENTRIES[lbIndex]; const img = document.getElementById('lb-img'); @@ -37,6 +55,7 @@ function renderLightbox() { const aud = document.getElementById('lb-audio'); [img, vid, aud].forEach(el => { el.classList.add('hidden'); el.pause && el.pause(); }); + lbBuildInfo(e); if (e.type === 'image') { img.src = e.src; img.alt = e.title; -- cgit v1.2.3