Simplify image galleries: folder download link, no per-image download
Remove FileBrowser API fetch, async lightbox logic, and per-image download button. Add a single folder share link per collection page next to Back to Hub. Lightbox is now fully synchronous. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -216,14 +216,6 @@
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
color: var(--accent);
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.5rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -232,7 +224,10 @@
|
||||
<span class="subtitle">2010–2014 Collection</span>
|
||||
<h1>WayBack</h1>
|
||||
</div>
|
||||
<a href="images.html" class="nav-back">← Back to Hub</a>
|
||||
<div class="nav-actions">
|
||||
<a href="images.html" class="nav-back">← Back to Hub</a>
|
||||
<a href="https://files.exopraxist.org/share/voxb2LeQ" class="nav-back" target="_blank">↓ Download Folder</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
@@ -244,28 +239,22 @@
|
||||
<button class="lightbox-btn close-btn" id="close-btn">CLOSE [ESC]</button>
|
||||
<img id="lightbox-img" src="" alt="">
|
||||
<div id="lightbox-filename"></div>
|
||||
<div id="loading-indicator" class="loading-indicator">UPGRADING TO FULL RESOLUTION...</div>
|
||||
<div class="lightbox-controls">
|
||||
<button class="lightbox-btn" id="prev-btn">PREV</button>
|
||||
<a href="#" id="dl-btn" class="lightbox-btn" target="_blank">DOWNLOAD</a>
|
||||
<button class="lightbox-btn" id="next-btn">NEXT</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const COLLECTION_TOKEN = 'voxb2LeQ';
|
||||
const THUMBNAILS = ["3DCB5B82-94E6-4BA0-A382-3A98007038F2.jpg","BreakermanAvatar1.jpg","ChristmiesPortrait3_low.jpg","ChristmiesPortrait_low.jpg","_DSC3150.jpg","Enlight100.jpg","Enlight1-2.jpg","Enlight1-4 (copy 1).jpg","Enlight1-4.jpg","Enlight27.jpg","Enlight33.jpg","Enlight37.jpg","Enlight38.jpg","Enlight39.jpg","Enlight40.jpg","Enlight44.jpg","Enlight46.jpg","Enlight47.jpg","Enlight48.jpg","Enlight49.jpg","Enlight50.jpg","Enlight51.jpg","Enlight54.jpg","Enlight55.jpg","Enlight56.jpg","Enlight68.jpg","Enlight70.jpg","Enlight71.jpg","Enlight72.jpg","Enlight73.jpg","Enlight74.jpg","Enlight76.jpg","Enlight94.jpg","Enlight95.jpg","Enlight98.jpg","Enlight99.jpg","Enlight9.jpg","IMG_0375.jpg","IMG_0787.jpg","IMG_0791.jpg","IMG_0828.jpg","IMG_0831.jpg","IMG_0835.jpg","IMG_0941.jpg","IMG_0944.jpg","IMG_0948.jpg","IMG_0970.jpg","IMG_0971.jpg","IMG_0972.jpg","IMG_1207.jpg","IMG_1208.jpg","IMG_1209.jpg","IMG_1210.jpg","IMG_1211.jpg","IMG_1212.jpg","IMG_1214.jpg","IMG_1215.jpg","IMG_1216.jpg","IMG_2610.jpg","IMG_2611.jpg","IMG_2612.jpg","IMG_2613.jpg","IMG_2614.jpg","IMG_2615.jpg","IMG_2616.jpg","IMG_2669.jpg","IMG_2684.jpg","IMG_2685.jpg","IMG_2696.jpg","IMG_2697.jpg","IMG_3123.jpg","IMG_3124.jpg","IMG_3188.jpg","IMG_3190.jpg","IMG_3482.jpg","IMG_3483.jpg","IMG_3484.jpg","IMG_3485.jpg","IMG_3486.jpg","IMG_3509.jpg","IMG_3512.jpg","IMG_3515.jpg","IMG_3516.jpg","IMG_3517.jpg","IMG_3751.jpg","IMG_3752.jpg","IMG_3760.jpg","JncPortraits1.jpg","JncPortraits2.jpg","JncPortraits3.jpg","Jnc_Teaser2.jpg","JnC_Teaser3.jpg","JnC_Teaser4.jpg","JnC_Teaser.jpg","ORT_ad1.jpg","ORT_ad2.jpg","ORT_ad3.jpg","ORT_ad4.jpg","TJF Cover photo2.jpg","TJF Cover photo3.jpg","TJF Cover photo4.jpg","TJF Cover photo5.jpg","TJF Cover photo6.jpg"];
|
||||
const THUMBNAILS =["3DCB5B82-94E6-4BA0-A382-3A98007038F2.jpg","BreakermanAvatar1.jpg","ChristmiesPortrait3_low.jpg","ChristmiesPortrait_low.jpg","_DSC3150.jpg","Enlight100.jpg","Enlight1-2.jpg","Enlight1-4 (copy 1).jpg","Enlight1-4.jpg","Enlight27.jpg","Enlight33.jpg","Enlight37.jpg","Enlight38.jpg","Enlight39.jpg","Enlight40.jpg","Enlight44.jpg","Enlight46.jpg","Enlight47.jpg","Enlight48.jpg","Enlight49.jpg","Enlight50.jpg","Enlight51.jpg","Enlight54.jpg","Enlight55.jpg","Enlight56.jpg","Enlight68.jpg","Enlight70.jpg","Enlight71.jpg","Enlight72.jpg","Enlight73.jpg","Enlight74.jpg","Enlight76.jpg","Enlight94.jpg","Enlight95.jpg","Enlight98.jpg","Enlight99.jpg","Enlight9.jpg","IMG_0375.jpg","IMG_0787.jpg","IMG_0791.jpg","IMG_0828.jpg","IMG_0831.jpg","IMG_0835.jpg","IMG_0941.jpg","IMG_0944.jpg","IMG_0948.jpg","IMG_0970.jpg","IMG_0971.jpg","IMG_0972.jpg","IMG_1207.jpg","IMG_1208.jpg","IMG_1209.jpg","IMG_1210.jpg","IMG_1211.jpg","IMG_1212.jpg","IMG_1214.jpg","IMG_1215.jpg","IMG_1216.jpg","IMG_2610.jpg","IMG_2611.jpg","IMG_2612.jpg","IMG_2613.jpg","IMG_2614.jpg","IMG_2615.jpg","IMG_2616.jpg","IMG_2669.jpg","IMG_2684.jpg","IMG_2685.jpg","IMG_2696.jpg","IMG_2697.jpg","IMG_3123.jpg","IMG_3124.jpg","IMG_3188.jpg","IMG_3190.jpg","IMG_3482.jpg","IMG_3483.jpg","IMG_3484.jpg","IMG_3485.jpg","IMG_3486.jpg","IMG_3509.jpg","IMG_3512.jpg","IMG_3515.jpg","IMG_3516.jpg","IMG_3517.jpg","IMG_3751.jpg","IMG_3752.jpg","IMG_3760.jpg","JncPortraits1.jpg","JncPortraits2.jpg","JncPortraits3.jpg","Jnc_Teaser2.jpg","JnC_Teaser3.jpg","JnC_Teaser4.jpg","JnC_Teaser.jpg","ORT_ad1.jpg","ORT_ad2.jpg","ORT_ad3.jpg","ORT_ad4.jpg","TJF Cover photo2.jpg","TJF Cover photo3.jpg","TJF Cover photo4.jpg","TJF Cover photo5.jpg","TJF Cover photo6.jpg"];
|
||||
|
||||
let fbIndex = null;
|
||||
let currentIndex = -1;
|
||||
|
||||
const galleryEl = document.getElementById('gallery');
|
||||
const lightboxEl = document.getElementById('lightbox');
|
||||
const lightboxImg = document.getElementById('lightbox-img');
|
||||
const lightboxFilename = document.getElementById('lightbox-filename');
|
||||
const dlBtn = document.getElementById('dl-btn');
|
||||
const loadingIndicator = document.getElementById('loading-indicator');
|
||||
|
||||
function renderGallery() {
|
||||
THUMBNAILS.forEach((filename, index) => {
|
||||
@@ -278,59 +267,13 @@
|
||||
});
|
||||
}
|
||||
|
||||
async function getFBIndex() {
|
||||
if (fbIndex) return fbIndex;
|
||||
try {
|
||||
const res = await fetch(`https://files.exopraxist.org/api/public/share/${COLLECTION_TOKEN}`);
|
||||
const data = await res.json();
|
||||
fbIndex = {};
|
||||
for (const item of data.items) {
|
||||
const stem = item.name.replace(/\.[^.]+$/, '');
|
||||
fbIndex[stem] = item.name;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('FileBrowser fetch failed:', e);
|
||||
fbIndex = {};
|
||||
}
|
||||
return fbIndex;
|
||||
}
|
||||
|
||||
async function openLightbox(index) {
|
||||
function openLightbox(index) {
|
||||
currentIndex = index;
|
||||
const thumbFilename = THUMBNAILS[currentIndex];
|
||||
const thumbUrl = `WayBack/thumbnails/${thumbFilename}`;
|
||||
|
||||
// Show thumbnail immediately
|
||||
lightboxImg.src = thumbUrl;
|
||||
lightboxImg.src = `WayBack/thumbnails/${thumbFilename}`;
|
||||
lightboxFilename.textContent = thumbFilename;
|
||||
dlBtn.href = thumbUrl;
|
||||
loadingIndicator.style.display = 'block';
|
||||
|
||||
lightboxEl.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Lazy upgrade to full-res
|
||||
const stem = thumbFilename.replace('.jpg', '');
|
||||
const idx = await getFBIndex();
|
||||
const originalName = idx[stem];
|
||||
|
||||
if (originalName) {
|
||||
const fullResUrl = `https://files.exopraxist.org/api/public/dl/${COLLECTION_TOKEN}/${encodeURIComponent(originalName)}`;
|
||||
// Only update if still on the same image
|
||||
if (currentIndex === index) {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
if (currentIndex === index) {
|
||||
lightboxImg.src = fullResUrl;
|
||||
dlBtn.href = fullResUrl;
|
||||
loadingIndicator.style.display = 'none';
|
||||
}
|
||||
};
|
||||
img.src = fullResUrl;
|
||||
}
|
||||
} else {
|
||||
loadingIndicator.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function closeLightbox() {
|
||||
|
||||
Reference in New Issue
Block a user