burrson/slideshow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

number and stuff

Browse Source
This commit is contained in:
Johannes
2025-07-11 20:42:51 +02:00
parent 1f62d9daf9
commit 9960eca028
7 changed files with 228 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
templates/slideshow.html
View File

@@ -3,30 +3,65 @@
<head>
<title>Slideshow</title>
<style>
body { background: #111; color: #fff; text-align: center; }
img { max-width: 90vw; max-height: 90vh; margin-top: 2vh; }
body { background:#111; color:#fff; text-align:center; }
img { max-width:90vw; max-height:80vh; margin-top:2vh; }
#controls { margin-top:2vh; }
button { padding:.6rem 1.1rem; font-size:1rem; margin:.2rem;
border:0; border-radius:.4rem; cursor:pointer; }
#counter { margin-top: 1vh; font-size: 1.1rem; }
</style>
</head>
<body>
<h1>Slideshow</h1>
<img id="slide" src="{{ images[0] }}" />
<img id="slide" src="{{ images[0] }}"/>
<div id="controls">
<button id="prev">◀︎ Prev</button>
<button id="toggle">Pause</button>
<button id="next">Next ▶︎</button>
<button id="fullscreen">⛶ Fullscreen</button>
</div>
<div id="counter">1 / {{ images|length }}</div>
<script>
const images = {{ images | tojson }};
const images = {{ images|tojson }};
const img = document.getElementById('slide');
let i = 0;
const btnT = document.getElementById('toggle');
const btnF = document.getElementById('fullscreen');
const counter = document.getElementById('counter');
let i = 0, playing = true, timer = setInterval(next, 15000);
function show(n) { // update helper
function show(n) {
i = (n + images.length) % images.length;
img.src = images[i];
counter.textContent = `${i + 1} / ${images.length}`;
}
function next() { show(i + 1); }
function prev() { show(i - 1); }
// auto-advance every 3000 ms
setInterval(() => show(i + 1), 3000);
document.getElementById('next').onclick = next;
document.getElementById('prev').onclick = prev;
btnT.onclick = () => {
playing = !playing;
btnT.textContent = playing ? 'Pause' : 'Play';
if (playing) timer = setInterval(next, 15000);
else clearInterval(timer);
};
btnF.onclick = () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
};
// keyboard control
document.addEventListener('keydown', e => {
if (e.key === 'ArrowRight') show(i + 1); // next
if (e.key === 'ArrowLeft') show(i - 1); // previous
if (e.key === 'ArrowRight') next();
if (e.key === 'ArrowLeft') prev();
});
</script>
</body>