Image Deck - Fullscreen Swipeable Image Viewer

:placard: Summary A fullscreen swipeable image viewer with one-handed controls, designed for efficient photo consumption with gesture support, metadata editing, and customizable visual effects.
:link: Repository https://github.com/codddarrr/stashapp-plugins-repo/tree/main/plugins/image-deck
:information_source: Source URL https://codddarrr.github.io/stashapp-plugins-repo/main/index.yml
:open_book: Install How to install a plugin?

A fullscreen image deck viewer with one-handed controls, designed for efficient photo consumption with gesture support, metadata editing, and customizable visual effects.

Perfect for browsing through performer images, tag collections, or galleries with intuitive swipe gestures on mobile or keyboard shortcuts on desktop.

:sparkles: Key Features

Core Viewing Experience:

  • :mobile_phone: One-Handed Operation - Optimized swipe gestures for mobile browsing
  • :artist_palette: 6 Transition Effects - Cards, coverflow, flip, cube, fade, or slide
  • :play_or_pause_button: Auto-Play Mode - Automatically advance at your chosen speed (100-5000ms)
  • :floppy_disk: Resume Position - Remembers where you left off (session-based)
  • :high_voltage: Performance Optimized - Lazy loading, virtual slides, GPU acceleration for 60fps

Metadata Editing:

  • :memo: Quick Edit Modal - Swipe up (mobile) or press β€˜I’ (desktop)
  • :star: 5-Star Rating - Converts to Stash’s 100-point scale
  • :label: Tag Management - Add/remove tags with autocomplete search
  • :page_facing_up: Title & Details - Edit inline without leaving the viewer
  • :link: Quick Link - Open image page in new tab while staying in the viewer

Visual Customization:

  • :sparkles: Particle Effects - Configurable floating particles (0-200)
  • :rainbow: Ambient Glows - Pulsing background lighting with custom colors
  • :dizzy: Edge Lighting - Animated edge glow effects
  • :fireworks: Strobe Mode - Disco strobe effect with configurable speed/intensity
  • β›Ά Fullscreen Mode - Native browser fullscreen support
  • :artist_palette: Custom Color Themes - Adjust particle and ambient hues (0-360Β° color wheel)

Smart Controls:

  • Mobile: Swipe left/right to navigate, swipe down to close, swipe up for metadata
  • Desktop: Arrow keys, spacebar for play/pause, β€˜I’ for metadata, ESC to close
  • Universal: Tap controls, progress bar, image counter

:package: Installation

Repository: GitHub - codddarrr/stashapp-plugins-repo

Source: stashapp-plugins-repo/plugins/image-deck at main Β· codddarrr/stashapp-plugins-repo Β· GitHub

Manual Installation

  1. Copy the plugin files to your Stash plugins directory:
    /var/lib/stashapp/config/plugins/image-deck/
  2. Files included:
    - image-deck.yml - Plugin configuration
    - image-deck.js - Core functionality
    - image-deck.css - Styles
    - README.md - Documentation
  3. Restart Stash or reload plugins
  4. Configure settings in Stash Settings β†’ Plugins β†’ Image Deck
  5. Look for the :flower_playing_cards: button on performer images, tag images, and gallery pages!

:bullseye: Usage Scenarios

Mobile (One-Handed)

  1. Open any image gallery, performer, or tag images tab
  2. Tap the :flower_playing_cards: button to launch fullscreen
  3. Swipe right to browse photos
  4. Swipe up to rate, tag, and edit metadata
  5. Tap play for hands-free viewing
  6. Swipe down to exit

Desktop

  1. Click the :flower_playing_cards: launch button
  2. Use arrow keys for navigation
  3. Press β€˜I’ to view/edit metadata
  4. Spacebar for play/pause
  5. Click fullscreen button (β›Ά) for immersive mode
  6. ESC to close

:gear: Configuration

17+ customizable settings including:

  • Auto-play interval (100-5000ms)
  • Transition effects (cards, coverflow, flip, cube, fade, slide)
  • Particle count, speed, size, and color
  • Ambient glow color and pulse speed
  • Edge glow intensity
  • Strobe speed and intensity
  • Image glow/shadow intensity
  • Swipe resistance
  • 3D effect depth
  • Preload adjacent images

Performance Presets:

  • Beefier Machines: 150-200 particles, higher speeds, intense effects
  • Battery Saving: 20-40 particles (or 0 to disable), simple transitions

Color Themes:

  • Purple (default): Hue 260
  • Blue: Hue 200
  • Magenta: Hue 300
  • Green: Hue 120
  • Sunset: Hue 30
  • Custom: Any 0-360Β° value

:video_game: Controls Reference

Input Action
← β†’ Navigate images
Space Play/Pause
I Toggle metadata modal
ESC Close modal/viewer
Swipe β†’ ← Next/Previous
Swipe ↓ Close viewer
Swipe ↑ Open metadata
Click β›Ά Fullscreen
Click :high_voltage: Strobe
Click :information_source: Metadata

:memo: Notes

  • Loads first 100 images initially for performance (unlimited for galleries)
  • Position saved per session (survives navigation, not browser restart)
  • Auto-play stops at last image (no loop)
  • Respects prefers-reduced-motion for accessibility
  • Metadata changes save immediately to Stash database
  • Powered by https://swiperjs.com/

:bug: Troubleshooting

Performance issues?

  • Reduce particle count or disable (set to 0)
  • Use simpler transitions (fade/slide)
  • Lower particle speed and glow intensities

Images not loading?

  • Check browser console for errors
  • Verify Swiper.js CDN is accessible
  • Check GraphQL permissions

See the stashapp-plugins-repo/plugins/image-deck/README.md at main Β· codddarrr/stashapp-plugins-repo Β· GitHub for complete documentation.

Enjoy browsing! :flower_playing_cards: