diff options
| -rw-r--r-- | static/style.css | 3 | ||||
| -rw-r--r-- | templates/gallery.html | 24 |
2 files changed, 22 insertions, 5 deletions
diff --git a/static/style.css b/static/style.css index caf0d1e..87fd9ea 100644 --- a/static/style.css +++ b/static/style.css @@ -25,6 +25,7 @@ form button:hover{background:#2563eb} .empty{color:#888;text-align:center;padding:3rem 0} .lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.95);justify-content:center;align-items:center;z-index:100;cursor:pointer} .lightbox.active{display:flex} -.lightbox img{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:4px} +.lightbox img{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:4px;transition:opacity .15s} +.lightbox img.loading{opacity:.5;filter:blur(4px)} .lightbox-download{position:fixed;bottom:1.5rem;right:1.5rem;background:#3b82f6;color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.3rem;box-shadow:0 2px 8px rgba(0,0,0,.5)} .lightbox-download:hover{background:#2563eb} diff --git a/templates/gallery.html b/templates/gallery.html index 14e43c9..d21b518 100644 --- a/templates/gallery.html +++ b/templates/gallery.html @@ -84,18 +84,34 @@ function uploadFiles(files) { } const photos = [{{range .Photos}}'/g/{{$.Name}}/photo/{{.}}',{{end}}]; +const thumbs = [{{range .Photos}}'/g/{{$.Name}}/{{$.ThumbPrefix}}/{{.}}',{{end}}]; let currentIndex = -1; function openLightbox(index) { currentIndex = index; - const src = photos[index]; - document.getElementById('lightbox-img').src = src; - document.getElementById('lightbox-download').href = src; + const fullSrc = photos[index]; + const img = document.getElementById('lightbox-img'); + + img.src = thumbs[index]; + img.classList.add('loading'); + + const full = new Image(); + full.onload = () => { + if (currentIndex === index) { + img.src = fullSrc; + img.classList.remove('loading'); + } + }; + full.src = fullSrc; + + document.getElementById('lightbox-download').href = fullSrc; document.getElementById('lightbox').classList.add('active'); } function closeLightbox() { document.getElementById('lightbox').classList.remove('active'); - document.getElementById('lightbox-img').src = ''; + const img = document.getElementById('lightbox-img'); + img.src = ''; + img.classList.remove('loading'); currentIndex = -1; } document.addEventListener('keydown', e => { |