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

fullscreen container div with explicit tap zones for mobile nav

Browse Source
This commit is contained in:
Johannes
2026-05-04 04:25:48 +02:00
parent baa2741181
commit 1fad0b736e
1 changed files with 33 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
templates/slideshow.html
View File

@@ -7,13 +7,24 @@
h1{margin-top:2vh} h1{margin-top:2vh}
img{max-width:90vw;max-height:80vh;margin-top:2vh} img{max-width:90vw;max-height:80vh;margin-top:2vh}
/* fill screen when the image itself is fullscreen */ #fs-wrap:fullscreen, #fs-wrap:-webkit-full-screen {
img:fullscreen{ width:100vw; height:100vh;
width:100vw; background:#000;
height:100vh; display:flex; align-items:center; justify-content:center;
object-fit:contain; position:relative;
margin:0; }
cursor:default; #fs-wrap:fullscreen img, #fs-wrap:-webkit-full-screen img {
max-width:100vw; max-height:100vh;
object-fit:contain; margin:0; cursor:default;
}
#tap-prev, #tap-next {
display:none; position:absolute; top:0; height:100%; width:50%; z-index:10;
}
#tap-prev { left:0; }
#tap-next { right:0; }
#fs-wrap:fullscreen #tap-prev, #fs-wrap:fullscreen #tap-next,
#fs-wrap:-webkit-full-screen #tap-prev, #fs-wrap:-webkit-full-screen #tap-next {
display:block;
} }
#controls{margin-top:2vh} #controls{margin-top:2vh}
@@ -69,7 +80,11 @@
<div id="view"> <div id="view">
<div id="tag-sidebar"></div> <div id="tag-sidebar"></div>
<div id="image-area"> <div id="image-area">
<img id="slide" src="{{ images[0] }}" /> <div id="fs-wrap">
<img id="slide" src="{{ images[0] }}" />
<div id="tap-prev"></div>
<div id="tap-next"></div>
</div>
<div id="controls"> <div id="controls">
<button id="prev">◀︎ Prev</button> <button id="prev">◀︎ Prev</button>
<button id="toggle">Play</button> <button id="toggle">Play</button>
@@ -156,10 +171,11 @@
`</div>`; `</div>`;
}).join(''); }).join('');
} }
const img = document.getElementById('slide'); const img = document.getElementById('slide');
const btnT = document.getElementById('toggle'); const fs_wrap = document.getElementById('fs-wrap');
const btnF = document.getElementById('fullscreen'); const btnT = document.getElementById('toggle');
const counter= document.getElementById('counter'); const btnF = document.getElementById('fullscreen');
const counter = document.getElementById('counter');
const _params = new URLSearchParams(window.location.search); const _params = new URLSearchParams(window.location.search);
const _url_idx = parseInt(_params.get('idx') || '0', 10); const _url_idx = parseInt(_params.get('idx') || '0', 10);
@@ -205,12 +221,11 @@
}); });
let is_fullscreen = false; let is_fullscreen = false;
let t_start_x = 0, t_start_y = 0; let t_start_x = 0, t_start_y = 0;
img.addEventListener('touchstart', e => { fs_wrap.addEventListener('touchstart', e => {
if (!is_fullscreen) return;
t_start_x = e.touches[0].clientX; t_start_x = e.touches[0].clientX;
t_start_y = e.touches[0].clientY; t_start_y = e.touches[0].clientY;
}, { passive: true }); }, { passive: true });
img.addEventListener('touchend', e => { fs_wrap.addEventListener('touchend', e => {
if (!is_fullscreen) return; if (!is_fullscreen) return;
const dx = e.changedTouches[0].clientX - t_start_x; const dx = e.changedTouches[0].clientX - t_start_x;
const dy = e.changedTouches[0].clientY - t_start_y; const dy = e.changedTouches[0].clientY - t_start_y;
@@ -218,10 +233,8 @@
dx < 0 ? next() : prev(); dx < 0 ? next() : prev();
} }
}, { passive: true }); }, { passive: true });
img.addEventListener('click', e => { document.getElementById('tap-prev').addEventListener('click', prev);
if (!is_fullscreen) return; document.getElementById('tap-next').addEventListener('click', next);
e.clientX < window.innerWidth / 2 ? prev() : next();
});
document.addEventListener('fullscreenchange', ()=>{ document.addEventListener('fullscreenchange', ()=>{
is_fullscreen = !!document.fullscreenElement; is_fullscreen = !!document.fullscreenElement;
if(!is_fullscreen) reset_zoom(); if(!is_fullscreen) reset_zoom();
@@ -291,7 +304,7 @@
btnF.onclick=()=>{ btnF.onclick=()=>{
if(!is_fullscreen){ if(!is_fullscreen){
img.requestFullscreen().catch(()=>{}); fs_wrap.requestFullscreen().catch(()=>{});
is_fullscreen = true; is_fullscreen = true;
}else{ }else{
document.exitFullscreen().catch(()=>{}); document.exitFullscreen().catch(()=>{});