add fullscreen button

This commit is contained in:
Johannes
2026-03-13 21:51:47 +01:00
parent dbec447b39
commit 85d3b2a7ba
3 changed files with 35 additions and 0 deletions

View File

@@ -18,6 +18,7 @@ const recents_list = document.getElementById("recents_list");
const img_track = document.getElementById("img_track"); const img_track = document.getElementById("img_track");
const img_counter = document.getElementById("img_counter"); const img_counter = document.getElementById("img_counter");
const back_btn = document.getElementById("back_btn"); const back_btn = document.getElementById("back_btn");
const fs_btn = document.getElementById("fs_btn");
const arrow_left = document.getElementById("arrow_left"); const arrow_left = document.getElementById("arrow_left");
const arrow_right = document.getElementById("arrow_right"); const arrow_right = document.getElementById("arrow_right");
const loading_bar = document.getElementById("loading_bar"); const loading_bar = document.getElementById("loading_bar");
@@ -260,6 +261,20 @@ back_btn.addEventListener("click", close_gallery);
arrow_left.addEventListener("click", prev_image); arrow_left.addEventListener("click", prev_image);
arrow_right.addEventListener("click", next_image); arrow_right.addEventListener("click", next_image);
fs_btn.addEventListener("click", toggle_fullscreen);
function toggle_fullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(() => {});
} else {
document.exitFullscreen().catch(() => {});
}
}
document.addEventListener("fullscreenchange", () => {
fs_btn.innerHTML = document.fullscreenElement ? "✕" : "⛶";
});
recents_list.addEventListener("click", e => { recents_list.addEventListener("click", e => {
const chip = e.target.closest(".recent_chip"); const chip = e.target.closest(".recent_chip");
if (!chip) return; if (!chip) return;

View File

@@ -45,6 +45,7 @@
<div id="gallery_top"> <div id="gallery_top">
<button id="back_btn">&#8592;</button> <button id="back_btn">&#8592;</button>
<span id="img_counter"></span> <span id="img_counter"></span>
<button id="fs_btn" title="Fullscreen">&#x26F6;</button>
</div> </div>
<button id="arrow_left">&#8249;</button> <button id="arrow_left">&#8249;</button>
<button id="arrow_right">&#8250;</button> <button id="arrow_right">&#8250;</button>

View File

@@ -221,6 +221,25 @@ html, body {
border-radius: 999px; border-radius: 999px;
} }
#fs_btn {
background: rgba(0,0,0,0.5);
border: none;
border-radius: 999px;
color: #fff;
font-size: 1rem;
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
#fs_btn:active {
background: rgba(0,0,0,0.8);
}
/* desktop nav arrows */ /* desktop nav arrows */
#arrow_left, #arrow_right { #arrow_left, #arrow_right {
position: absolute; position: absolute;