explorigin/image_server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use navigable link elements.

Browse Source
This commit is contained in:
Timothy Farrell 2026-03-09 10:01:02 +00:00
parent 5774ef7779
commit b57ca2c47a
1 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend.html
View File

@ -25,6 +25,7 @@
padding: 20px;
user-select: none;
transition: color 0.2s;
text-decoration: none;
}
.chevron:hover { color: rgba(255, 255, 255, 0.9); }
.chevron.left { left: 10px; }
@ -33,23 +34,30 @@
</head>
<body>
<div id="container">
<img id="img" alt="Random image">
<div class="chevron left" id="prev-btn">&#8249;</div>
<div class="chevron right" id="next-btn">&#8250;</div>
<a href="#" id="img-link"><img id="img" alt="Random image"></a>
<a href="#" class="chevron left" id="prev-btn">&#8249;</a>
<a href="#" class="chevron right" id="next-btn">&#8250;</a>
</div>
<script>
let currentData = null;
function loadImageSrc(hash) {
document.getElementById('img').src = '/' + hash + '/data';
document.getElementById('img-link').href = '#';
history.replaceState(null, '', '#' + hash);
}
async function loadInfo(hash) {
const response = await fetch('/' + hash);
if (!response.ok) {
loadRandom();
return;
}
currentData = await response.json();
loadImageSrc(currentData.img);
document.getElementById('img').title = currentData.filename || '';
document.getElementById('prev-btn').href = '#' + currentData.previous;
document.getElementById('next-btn').href = '#' + currentData.next;
}
async function loadRandom() {
@ -58,24 +66,30 @@
await loadInfo(data.img);
}
document.getElementById('img').addEventListener('click', loadRandom);
document.getElementById('prev-btn').addEventListener('click', function() {
if (currentData && currentData.previous) loadInfo(currentData.previous);
window.addEventListener('hashchange', function() {
const hash = window.location.hash.slice(1);
if (hash) {
loadInfo(hash);
} else {
loadRandom();
}
});
document.getElementById('next-btn').addEventListener('click', function() {
if (currentData && currentData.next) loadInfo(currentData.next);
window.addEventListener('hashchange', function() {
const hash = window.location.hash.slice(1);
if (hash) loadInfo(hash);
});
document.addEventListener('keydown', function(e) {
e.preventDefault();
if (e.code === 'Space') {
e.preventDefault();
loadRandom();
} else if (e.code === 'ArrowLeft' && currentData && currentData.previous) {
e.preventDefault();
loadInfo(currentData.previous);
} else if (e.code === 'ArrowRight' && currentData && currentData.next) {
e.preventDefault();
loadInfo(currentData.next);
window.location.hash = '';
} else if (e.code === 'ArrowLeft') {
document.getElementById('prev-btn').click();
} else if (e.code === 'ArrowRight') {
document.getElementById('next-btn').click();
} else {
return;
}
});