115 lines
3.8 KiB
HTML
115 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Slideshow</title>
|
|
<style>
|
|
body{background:#111;color:#fff;text-align:center;margin:0}
|
|
h1{margin-top:2vh}
|
|
img{max-width:90vw;max-height:80vh;margin-top:2vh}
|
|
|
|
/* fill screen when the image itself is fullscreen */
|
|
img:fullscreen{
|
|
width:100vw;
|
|
height:100vh;
|
|
object-fit:contain;
|
|
margin:0;
|
|
}
|
|
|
|
#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] }}"/>
|
|
|
|
<div id="controls">
|
|
<button id="prev">◀︎ Prev</button>
|
|
<button id="toggle">Start</button>
|
|
<button id="next">Next ▶︎</button>
|
|
<button id="fullscreen">⛶ Fullscreen</button>
|
|
<button id="shuffle">Shuffle</button>
|
|
<select id="folder-select" onchange="changeFolder(this.value)">
|
|
{% for folder in folders %}
|
|
<option value="{{ folder }}" {% if folder == selected %}selected{% endif %}>{{ folder }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<input id="delay" type="number" min="1" value="15" style="width:4rem" />
|
|
<label for="delay">sec</label>
|
|
</div>
|
|
|
|
<div id="counter">1 / {{ images|length }}</div>
|
|
|
|
<script>
|
|
const images = {{ images|tojson }};
|
|
const img = document.getElementById('slide');
|
|
const btnT = document.getElementById('toggle');
|
|
const btnF = document.getElementById('fullscreen');
|
|
const counter= document.getElementById('counter');
|
|
let i=0, playing=false, timer=null; //, timer=setInterval(next,15000);
|
|
let shuffled = false;
|
|
let order = [...Array(images.length).keys()];
|
|
|
|
function show(n){
|
|
if (shuffled) n = order[(n+order.length)%order.length];
|
|
else n = (n+images.length)%images.length;
|
|
|
|
i = images.indexOf(images[n]);
|
|
img.src = images[n];
|
|
counter.textContent = `${i+1} / ${images.length}`;
|
|
}
|
|
|
|
function toggleShuffle(){
|
|
shuffled = !shuffled;
|
|
document.getElementById('shuffle').textContent = shuffled ? 'Unshuffle' : 'Shuffle';
|
|
if(shuffled){
|
|
order = [...Array(images.length).keys()];
|
|
for (let j = order.length - 1; j > 0; j--) {
|
|
const k = Math.floor(Math.random() * (j + 1));
|
|
[order[j], order[k]] = [order[k], order[j]];
|
|
}
|
|
}
|
|
}
|
|
|
|
function next(){show(i+1)}
|
|
function prev(){show(i-1)}
|
|
|
|
document.getElementById('next').onclick=next;
|
|
document.getElementById('prev').onclick=prev;
|
|
document.getElementById('shuffle').onclick = toggleShuffle;
|
|
|
|
btnT.onclick=()=>{
|
|
playing=!playing;
|
|
btnT.textContent=playing?'Pause':'Play';
|
|
if(playing){
|
|
const delaySec = parseInt(document.getElementById('delay').value, 10) || 15;
|
|
timer = setInterval(next, delaySec * 1000);
|
|
}
|
|
else{
|
|
clearInterval(timer);
|
|
}
|
|
};
|
|
|
|
btnF.onclick=()=>{
|
|
if(!document.fullscreenElement){
|
|
img.requestFullscreen(); // only the picture goes fullscreen
|
|
}else{
|
|
document.exitFullscreen();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown',e=>{
|
|
if(e.key==='ArrowRight')next();
|
|
if(e.key==='ArrowLeft') prev();
|
|
});
|
|
|
|
function changeFolder(folder){
|
|
window.location.href = "/?folder=" + encodeURIComponent(folder);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|