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

Add mouse navigation

Browse Source
This commit is contained in:
Timothy Farrell 2026-03-09 09:23:11 +00:00
parent a3e81068c1
commit b87bcdbb53
1 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend.html
View File

@ -7,11 +7,36 @@
<style> <style>
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #1a1a1a; } html, body { height: 100%; overflow: hidden; background: #1a1a1a; }
img { display: block; max-width: 100%; max-height: 100%; margin: auto; cursor: pointer; } #container {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
img { max-width: 100%; max-height: 100%; cursor: pointer; }
.chevron {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 48px;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
padding: 20px;
user-select: none;
transition: color 0.2s;
}
.chevron:hover { color: rgba(255, 255, 255, 0.9); }
.chevron.left { left: 10px; }
.chevron.right { right: 10px; }
</style> </style>
</head> </head>
<body> <body>
<img id="random-img" alt="Random image"> <div id="container">
<img id="random-img" alt="Random image">
<div class="chevron left" id="prev-btn">&#8249;</div>
<div class="chevron right" id="next-btn">&#8250;</div>
</div>
<script> <script>
let currentData = null; let currentData = null;
@ -33,6 +58,13 @@
} }
document.getElementById('random-img').addEventListener('click', loadRandom); document.getElementById('random-img').addEventListener('click', loadRandom);
document.getElementById('prev-btn').addEventListener('click', function() {
if (currentData && currentData.previous) loadInfo(currentData.previous);
});
document.getElementById('next-btn').addEventListener('click', function() {
if (currentData && currentData.next) loadInfo(currentData.next);
});
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function(e) {
if (e.code === 'Space') { if (e.code === 'Space') {
e.preventDefault(); e.preventDefault();