diff options
| author | Ken D'Ambrosio <ken@jots.org> | 2026-05-10 14:38:04 +0000 |
|---|---|---|
| committer | Ken D'Ambrosio <ken@jots.org> | 2026-05-10 14:38:04 +0000 |
| commit | a7c16b99a4284826ac5ac0ace4ee0f760a548ff4 (patch) | |
| tree | c8cb3679de1a88d3d8a54f787462aae944c91114 /views/album.erb | |
| parent | fa36e54d878a3274f7728eb0b84c351b33f3c6ed (diff) | |
Add slideshow: root-level, shuffle, fullscreen, click-to-album
- Root slideshow: all_media_entries walks the full media tree so
/slideshow/ shows every photo across all albums; Slideshow button
always appears on the root album page
- Shuffle and Full screen checkboxes sit next to the Slideshow button
on the album page; options pass as ?shuffle=1&fullscreen=1 URL params
- Fullscreen uses a tap-to-activate overlay (browsers block auto-entry
on page load); webkit-prefixed for Safari; ⛶ button and F key for
mid-session toggle
- Fullscreen mode hides controls, counter, caption bar, and site header
- Exiting fullscreen auto-pauses so the current photo stays visible
- Click/tap anywhere in the stage navigates to the photo's album
lightbox; reads the live src attribute instead of ssIdx to avoid a
race where ssIdx advances during the cross-fade while the old photo
is still on screen
- layout.erb excluded from slideshow (layout: false) so the site header
never appears there
- CSS cache-busted with ?v=2
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'views/album.erb')
| -rw-r--r-- | views/album.erb | 8 |
1 files changed, 5 insertions, 3 deletions
diff --git a/views/album.erb b/views/album.erb index 961b26a..c99ec3c 100644 --- a/views/album.erb +++ b/views/album.erb @@ -11,8 +11,10 @@ <h1><%= @title %></h1> <% if @desc %><p class="album-desc"><%= @desc %></p><% end %> <div class="album-actions"> - <% if @entries.any? { |e| %i[image video].include?(e[:type]) } %> - <a href="/slideshow/<%= @rel %>" class="btn">Slideshow</a> + <% if @rel.empty? ? @albums.any? : @entries.any? { |e| %i[image video].include?(e[:type]) } %> + <a href="/slideshow/<%= @rel %>" id="ss-launch" data-base="/slideshow/<%= @rel %>" class="btn">Slideshow</a> + <label class="ss-opt-label"><input type="checkbox" id="ss-opt-shuffle"> Shuffle</label> + <label class="ss-opt-label"><input type="checkbox" id="ss-opt-fullscreen"> Full screen</label> <% end %> </div> </div> @@ -103,4 +105,4 @@ const ENTRIES = <%= @entries.map { |e| e.merge(src: "/media/#{file_rel}") }.to_json %>; </script> -<script src="/js/album.js?v=2"></script> +<script src="/js/album.js?v=3"></script> |
