PhotoSwipe v5 — JavaScript image gallery and lightbox

Demo | Documentation

About This Fork

This is a fork of the original PhotoSwipe library. It includes additional enhancements for smoother user interactions:

• Smooth Transition Animations: Added animated transitions for slide navigation via arrow buttons and keyboard arrow keys
• Rapid Input Handling: Properly manages rapid button/key presses to prevent animation conflicts
• Accessibility Support: Respects prefers-reduced-motion for users who prefer reduced animations
• Dynamic Timing: Uses the CSS custom property --pswp-transition-duration for consistent timing
• Dark Theme Support: Includes basic-dark.css for easy dark theme implementation

These changes maintain full compatibility with the original PhotoSwipe API and behavior.

About Basic Dark Theme

The basic-dark.css file provides a complete dark theme for PhotoSwipe with the following features:

• CSS Custom Properties:

  • --pswp-theme-background-base: Controls the base background color (default: black)
  • --pswp-theme-foreground-base: Controls text and icon colors (default: white)
  • --pswp-theme-radius: Controls border radius for UI elements (default: 0.3rem)

• Enhanced UI Elements:

  • Semi-transparent backgrounds with backdrop blur effects
  • Improved button styling with hover states
  • Responsive arrow button design
  • Modern glassmorphism aesthetic

• Animation Support: Includes blur animations for opening/closing transitions using the pswp--closing class

To use the dark theme, simply include basic-dark.css after the main PhotoSwipe CSS:

import '@juji/photoswipe/basic-dark.css';

Screenshot

basic-dark Example:

Repo structure

• dist/ - main JS and CSS
• src/ - source JS and CSS.
  • src/js/photoswipe.js - entry for PhotoSwipe Core.
  • src/js/lightbox/lightbox.js - entry for PhotoSwipe Lightbox.
• docs/ - documentation markdown files.
• demo-docs-website/ - website with documentation, demos and manual tests.
• build/ - rollup build config.

To build JS and CSS in dist/ directory, run npm run build.

To run the demo website and automatically rebuild files during development, run npm install in demo-docs-website/ and npm run watch in the root directory.

Older versions

Documentation for the old version (v4) can be found here and the code for 4.1.3 is here.

This project is tested with BrowserStack.