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

2.0

Browse Source
This commit is contained in:
Johannes
2025-07-13 18:59:02 +02:00
parent 9960eca028
commit 3268236e03
2 changed files with 91 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
Slideshow.py
View File

@@ -1,14 +1,19 @@
from flask import Flask, render_template
from flask import Flask, render_template, request
import os
app = Flask(__name__, static_folder='Pictures')
@app.route('/')
def slideshow():
image_folder = 'Pictures/lori_bondage'
base_folder = 'Pictures'
folders = [f for f in os.listdir(base_folder) if os.path.isdir(os.path.join(base_folder, f))]
selected = request.args.get('folder', 'test')
image_folder = os.path.join(base_folder, selected)
images = [f'/{image_folder}/{f}' for f in os.listdir(image_folder)
if f.lower().endswith(('png', 'jpg', 'jpeg', 'gif'))]
return render_template('slideshow.html', images=images)
return render_template('slideshow.html', images=images, folders=folders, selected=selected)
if __name__ == '__main__':
app.run(debug=True)

120
templates/slideshow.html
View File

@@ -3,12 +3,22 @@
<head>
<title>Slideshow</title>
<style>
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; }
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>
@@ -18,51 +28,87 @@
<div id="controls">
<button id="prev">◀︎ Prev</button>
<button id="toggle">Pause</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 = true, timer = setInterval(next, 15000);
function show(n) {
i = (n + images.length) % images.length;
img.src = images[i];
counter.textContent = `${i + 1} / ${images.length}`;
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 next() { show(i + 1); }
function prev() { show(i - 1); }
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);
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) {
document.documentElement.requestFullscreen();
} else {
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();
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>