2 files changed, 30 insertions, 0 deletions
diff --git a/public/css/style.css b/public/css/style.css
index bb152aa..3dd2450 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -186,6 +186,17 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; }
 #lb-video { max-width: calc(100vw - 32px); max-height: calc(100vh - 130px); display: block; }
 #lb-audio { width: 400px; max-width: 90vw; display: block; }
 
+.lb-info {
+  position: absolute; bottom: 0; left: 0; right: 0;
+  background: rgba(0,0,0,.72);
+  padding: 10px 14px;
+  font-size: .82rem;
+  line-height: 1.6;
+}
+.lb-info dl { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; margin: 0; }
+.lb-info dt { color: #aaa; white-space: nowrap; }
+.lb-info dd { margin: 0; color: #eee; }
+
 .lb-caption-bar {
   padding: 8px 80px;
   text-align: center;
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]) => `<dt>${k}</dt><dd>${v}</dd>`).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;