diff options
| author | Ken <ken@jots.org> | 2026-05-09 04:41:03 +0000 |
|---|---|---|
| committer | Ken <ken@jots.org> | 2026-05-09 04:41:03 +0000 |
| commit | c75beda743dfd6af63f512e928d0889d9ead3973 (patch) | |
| tree | bed91fd4f9d36a905be0b1ef990457a1e37e567b /views/slideshow.erb | |
Initial commit — Albumen photo album
Ruby/Sinatra self-hosted photo album with directory hierarchy,
per-photo captions and visibility, lightbox, slideshow, admin UI,
and Let's Encrypt HTTPS via Apache reverse proxy on prouter.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'views/slideshow.erb')
| -rw-r--r-- | views/slideshow.erb | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/views/slideshow.erb b/views/slideshow.erb new file mode 100644 index 0000000..847da65 --- /dev/null +++ b/views/slideshow.erb @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title><%= @title %> — Slideshow</title> + <link rel="stylesheet" href="/css/style.css"> +</head> +<body class="slideshow-page"> + <div id="slideshow"> + <div id="ss-stage"> + <img id="ss-img" src="" alt="" style="display:none"> + <video id="ss-video" playsinline style="display:none"></video> + <div id="ss-caption-bar"> + <span id="ss-title"></span> + <span id="ss-caption"></span> + </div> + </div> + <div id="ss-controls"> + <a href="/browse/<%= @rel %>" class="btn btn-sm">← Album</a> + <button onclick="ssPrev()" class="btn btn-sm">‹ Prev</button> + <button onclick="ssToggle()" id="ss-play-btn" class="btn btn-sm">⏸ Pause</button> + <button onclick="ssNext()" class="btn btn-sm">Next ›</button> + <label class="ss-interval-label"> + Interval + <input type="number" id="ss-interval" value="4" min="1" max="60" step="1"> s + </label> + </div> + <div id="ss-counter"></div> + </div> + + <script> + const SS_ENTRIES = <%= @entries.map { |e| + file_rel = @rel.empty? ? e[:name] : "#{@rel}/#{e[:name]}" + e.merge(src: "/media/#{file_rel}") + }.to_json %>; + const SS_REL = <%= @rel.to_json %>; + </script> + <script src="/js/slideshow.js"></script> +</body> +</html> |