jlkruger/singular-particular-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify image galleries: folder download link, no per-image download

Browse Source 
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:
JL Kruger
2026-03-27 20:33:49 +02:00
parent 696bc9c2a7
commit 781d3ef1e7
4 changed files with 28 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
Images/myster-wizzard.html
View File

@@ -211,14 +211,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>
@@ -227,7 +219,10 @@
<span class="subtitle">2022–2025 Collection</span>
<h1>MysterWizzard</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/swAa4bTp" class="nav-back" target="_blank">↓ Download Folder</a>
</div>
</header>
<main>
@@ -239,28 +234,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 = 'swAa4bTp';
const THUMBNAILS = ["20240926_142229.jpg","20241127_195824.jpg","707ac20b-6197-4d14-8120-386662f8b757.jpg","71482354-65c6-4071-a5e5-656fd476635e.jpg","8DAD0415-7437-496B-8833-FEA53B54898C.jpg","a2e0e59a-7e73-46b8-a8b9-ca729908e599.jpg","b8d94cf9-98a1-44f3-a393-7eba7dc8c2cc.jpg","BLVD_ColorTest_Splash_5jpg.jpg","C572D811-090C-4080-BC9E-A0A4D6F2A513.jpg","Enlight96.jpg","Enlight97.jpg","FC17DC88-653C-4DE6-9714-FDEEC7B77559.jpg","IMG_0003.jpg","IMG_0004.jpg","IMG_0006.jpg","IMG_0007.jpg","IMG_0009.jpg","IMG_0010.jpg","IMG_0227.jpg","IMG_0233.jpg","IMG_2062.jpg","IMG_2094.jpg","IMG_2095.jpg","IMG_2096.jpg","IMG_2097.jpg","IMG_2098.jpg","IMG_2101.jpg","IMG_2172.jpg","IMG_2878.jpg","IMG_2883.jpg","IMG_2886.jpg","IMG_2888.jpg","IMG_2889.jpg","IMG_2903.jpg","IMG_2904.jpg","IMG_2905.jpg","IMG_2906.jpg","IMG_2907.jpg","IMG_2912.jpg","IMG_2913.jpg","IMG_2914.jpg","IMG_2919.jpg","IMG_2920.jpg","IMG_2921.jpg","IMG_2940.jpg","IMG_2941.jpg","IMG_2942.jpg","IMG_2949.jpg","IMG_2950.jpg","IMG_2951.jpg","IMG_2956.jpg","IMG_2957.jpg","IMG_2958.jpg","IMG_2973.jpg","IMG_2993.jpg","IMG_2994.jpg","IMG_2995.jpg","IMG_2996.jpg","IMG_2997.jpg","IMG_2998.jpg","IMG_2999.jpg","IMG_3001.jpg","IMG_3003.jpg","IMG_3004.jpg","IMG_3005.jpg","IMG_3011.jpg","IMG_3013.jpg","IMG_3027.jpg","IMG_3028.jpg","IMG_3029.jpg","IMG_3030.jpg","IMG_3041.jpg","IMG_3046.jpg","IMG_3047.jpg","IMG_3050.jpg","IMG_3051.jpg","IMG_3052.jpg","IMG_3069.jpg","IMG_3070.jpg","IMG_3558.jpg","IMG_3681.jpg","IMG_4298.jpg","IMG_4474.jpg","IMG_4919.jpg","IMG_5162.jpg","IMG_7493.jpg","IMG_7494.jpg","IMG_7495.jpg","IMG_7496.jpg","IMG_7500.jpg","IMG_9749.jpg","IMG_9753.jpg","IMG_9754.jpg","TShedza Skull Dressing Concept.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) => {
@@ -273,58 +262,16 @@
});
}
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 = `MysterWizzard/thumbnails/${thumbFilename}`;
lightboxImg.src = thumbUrl;
lightboxImg.src = `MysterWizzard/thumbnails/${thumbFilename}`;
lightboxFilename.textContent = thumbFilename;
dlBtn.href = thumbUrl;
loadingIndicator.style.display = 'block';
lightboxEl.style.display = 'flex';
document.body.style.overflow = 'hidden';
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)}`;
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() {
lightboxEl.style.display = 'none';
lightboxImg.src = '';