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}
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;
cursor:default;
#fs-wrap:fullscreen, #fs-wrap:-webkit-full-screen {
width:100vw; height:100vh;
background:#000;
display:flex; align-items:center; justify-content:center;
position:relative;
}
#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}
@@ -69,7 +80,11 @@
<div id="view">
<div id="tag-sidebar"></div>
<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">
<button id="prev">◀︎ Prev</button>
<button id="toggle">Play</button>
@@ -156,10 +171,11 @@
`</div>`;
}).join('');
}
const img = document.getElementById('slide');
const btnT = document.getElementById('toggle');
const btnF = document.getElementById('fullscreen');
const counter= document.getElementById('counter');
const img = document.getElementById('slide');
const fs_wrap = document.getElementById('fs-wrap');
const btnT = document.getElementById('toggle');
const btnF = document.getElementById('fullscreen');
const counter = document.getElementById('counter');
const _params = new URLSearchParams(window.location.search);
const _url_idx = parseInt(_params.get('idx') || '0', 10);
@@ -205,12 +221,11 @@
});
let is_fullscreen = false;
let t_start_x = 0, t_start_y = 0;
img.addEventListener('touchstart', e => {
if (!is_fullscreen) return;
fs_wrap.addEventListener('touchstart', e => {
t_start_x = e.touches[0].clientX;
t_start_y = e.touches[0].clientY;
}, { passive: true });
img.addEventListener('touchend', e => {
fs_wrap.addEventListener('touchend', e => {
if (!is_fullscreen) return;
const dx = e.changedTouches[0].clientX - t_start_x;
const dy = e.changedTouches[0].clientY - t_start_y;
@@ -218,10 +233,8 @@
dx < 0 ? next() : prev();
}
}, { passive: true });
img.addEventListener('click', e => {
if (!is_fullscreen) return;
e.clientX < window.innerWidth / 2 ? prev() : next();
});
document.getElementById('tap-prev').addEventListener('click', prev);
document.getElementById('tap-next').addEventListener('click', next);
document.addEventListener('fullscreenchange', ()=>{
is_fullscreen = !!document.fullscreenElement;
if(!is_fullscreen) reset_zoom();
@@ -291,7 +304,7 @@
btnF.onclick=()=>{
if(!is_fullscreen){
img.requestFullscreen().catch(()=>{});
fs_wrap.requestFullscreen().catch(()=>{});
is_fullscreen = true;
}else{
document.exitFullscreen().catch(()=>{});