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

add Previews folder with ≤1MB scaled previews, toggle in UI

Browse Source
This commit is contained in:
Johannes
2026-05-06 03:02:39 +02:00
parent 6213b34e8b
commit af38049294
8 changed files with 143 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
templates/slideshow.html
View File

@@ -29,6 +29,8 @@
#controls{margin-top:2vh}
button{padding:.6rem 1.1rem;font-size:1rem;margin:.2rem;border:0;border-radius:.4rem;cursor:pointer}
#quality-toggle{background:#446;color:#ccf}
#quality-toggle.full{background:#464;color:#cfc}
#counter{margin-top:1vh;font-size:1.1rem}
@@ -84,7 +86,7 @@
<div id="image-area">
<div id="file-size"></div>
<div id="fs-wrap">
<img id="slide" src="{{ images[0] }}" />
<img id="slide" src="{{ preview_images[0] }}" />
<div id="tap-prev"></div>
<div id="tap-next"></div>
</div>
@@ -94,6 +96,7 @@
<button id="next">Next ▶︎</button>
<button id="fullscreen">⛶ Fullscreen</button>
<button id="shuffle">Shuffle</button>
<button id="quality-toggle">Full Size</button>
<input id="delay" type="number" value="15" style="width:4rem" />
<label for="delay">sec</label>
</div>
@@ -150,10 +153,18 @@
{% if images %}
<script>
const images = {{ images|tojson }};
const post_urls = {{ post_urls|tojson }};
const tags_list = {{ tags_list|tojson }};
const file_sizes = {{ file_sizes|tojson }};
const images = {{ images|tojson }};
const previews = {{ preview_images|tojson }};
const post_urls = {{ post_urls|tojson }};
const tags_list = {{ tags_list|tojson }};
const file_sizes = {{ file_sizes|tojson }};
const preview_sizes = {{ preview_sizes|tojson }};
let use_full = false;
function cur_src(n) { return use_full ? images[n] : previews[n]; }
function cur_size(n) { return use_full ? file_sizes[n] : preview_sizes[n]; }
function fmt_size(b){ return b >= 1048576 ? (b/1048576).toFixed(1)+' MB' : Math.round(b/1024)+' KB'; }
const sidebar = document.getElementById('tag-sidebar');
@@ -180,12 +191,13 @@
`</div>`;
}).join('');
}
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 file_size_el = document.getElementById('file-size');
const img = document.getElementById('slide');
const fs_wrap = document.getElementById('fs-wrap');
const btnT = document.getElementById('toggle');
const btnF = document.getElementById('fullscreen');
const btnQ = document.getElementById('quality-toggle');
const counter = document.getElementById('counter');
const file_size_el = document.getElementById('file-size');
const _params = new URLSearchParams(window.location.search);
const _url_idx = parseInt(_params.get('idx') || '0', 10);
@@ -256,7 +268,7 @@
const idx = shuffled
? order[(i + k) % order.length]
: (i + k) % images.length;
new Image().src = images[idx];
new Image().src = cur_src(idx);
}
}
@@ -265,9 +277,9 @@
else n = (n+images.length)%images.length;
i = n;
img.src = images[n];
img.src = cur_src(n);
counter.textContent = `${i+1} / ${images.length}`;
file_size_el.textContent = fmt_size(file_sizes[n]);
file_size_el.textContent = fmt_size(cur_size(n));
render_tags(n);
reset_zoom();
preload_next();
@@ -277,12 +289,20 @@
}
// init to url index
img.src = images[i];
img.src = cur_src(i);
counter.textContent = `${i+1} / ${images.length}`;
file_size_el.textContent = fmt_size(file_sizes[i]);
file_size_el.textContent = fmt_size(cur_size(i));
render_tags(i);
preload_next();
btnQ.onclick = () => {
use_full = !use_full;
btnQ.textContent = use_full ? 'Preview' : 'Full Size';
btnQ.className = use_full ? 'full' : '';
img.src = cur_src(i);
file_size_el.textContent = fmt_size(cur_size(i));
};
function toggleShuffle(){
shuffled = !shuffled;
document.getElementById('shuffle').textContent = shuffled ? 'Unshuffle' : 'Shuffle';