PhotoSwipe

About PhotoSwipe

**PhotoSwipe** is a lightweight, dependency-free JavaScript image gallery and lightbox library designed for both mobile and desktop, created by Ukrainian developer Dmytro Semenov. With nearly 25,000 GitHub stars and a reputation for fluid touch gestures and smooth animations, PhotoSwipe has become one of the most popular open-source lightbox solutions. Version 5 represents a complete ES6 rewrite with improved performance, dynamic import support, and a simplified API. The library is framework-independent, modular, and works seamlessly across all modern browsers that support ES6 modules. PhotoSwipe is MIT licensed for both personal and commercial projects. **Category:** Image Gallery / Lightbox / JavaScript Library / Photo Viewer / Mobile-First UI / Touch Gestures **Webstudio Integration:** PhotoSwipe integrates with Webstudio through several methods. **HTML Embed with CDN**:Add PhotoSwipe via CDN links (available on cdnjs) in Webstudio's HTML Embed component—include the CSS file and both JavaScript files (photoswipe-lightbox and photoswipe), then initialize with a simple configuration targeting your gallery selector. **NPM installation for custom code:** If using Webstudio with a build process, install via npm i photoswipe and import as ES modules. **Dynamic import support:** PhotoSwipe supports lazy loading—the core library only loads when a user clicks a thumbnail, avoiding render-blocking. **Markup requirements:** Structure your Webstudio image galleries with anchor tags containing href (full image URL), data-pswp-width, and data-pswp-height attributes. PhotoSwipe automatically handles the rest. **React wrapper available:** For React-based implementations, use react-photoswipe-gallery package which provides a configurable wrapper around PhotoSwipe with full plugin support. **Strengths:** **Zero dependencies**—pure JavaScript with no jQuery or other library requirements. **Exceptional mobile experience** with fluid touch gestures, pinch-to-zoom, and swipe navigation that feels native. **Dynamic import support**—PhotoSwipe doesn't block page rendering; core JS loads only when needed. **Built-in responsive images support** via srcset—automatically loads larger images as users zoom. **CSS-cropped thumbnail animation**—opening transitions work correctly even from cropped thumbnails. **Single CSS file with CSS variables**—no external assets required; icons are dynamically generated and tiny. **Flexible zoom controls**—open images in zoomed state, control zoom levels programmatically. **Plugin architecture** including Dynamic Caption plugin (positions captions intelligently) and Deep Zoom plugin (for extremely large images like maps and artwork). **Framework independent**—works with vanilla JS, React, Vue, Angular, or any framework. Official React integration via react-photoswipe-gallery. **Comprehensive API**with events, methods, and lifecycle hooks for custom behavior. **Accessible design** with keyboard navigation support. **Small footprint**—minimal CSS and modular JS. **Well-documented** with examples and playgrounds (StackBlitz, CodeSandbox, CodePen). Available via npm, yarn, or CDN. Active development with v6 in progress. **Weaknesses:** **Requires image dimensions upfront**—you must specify data-pswp-width and data-pswp-heightattributes for each image (can be automated but adds complexity). **No built-in caption** in v5 core—captions require the separate Dynamic Caption plugin or custom implementation (removed from core for accessibility reasons). **No history/hash navigation** in v5—removed as outdated technology (was in v4). **No social sharing buttons**—removed from core (considered unreliable). **No fullscreen button** by default—removed from core but can be added via documented example. **Not designed as inline gallery**—primarily built for dialog/modal use. **ES6 modules required**—doesn't work in IE11, Opera Mini, UC browser, or very old browser versions without transpiled UMD version. **Learning curve for customization**—while basic setup is simple, advanced customization (custom UI elements, event handling) requires deeper JavaScript knowledge. **Manual thumbnail generation**—you need to create/manage thumbnail images separately. **Pricing:** Completely free and open-source under MIT license for personal and commercial projects. Development supported through Open Collective donations. **Key features in v5:** - ES6 module distribution with dynamic import - Improved animation and gesture engine - CSS variables for easy theming - Built-in srcset/responsive image support - Zoom level control - Cropped thumbnail animation support - Plugin system for extensibility **Available plugins:** - **Dynamic Caption Plugin:** Intelligently positions captions below or beside images based on available space - **Deep Zoom Plugin:** Tile-based viewer for extremely large images (30,000px+), loads tiles only when user zooms beyond primary image **Comparison with alternatives:** PhotoSwipe vs. Lightbox2: PhotoSwipe offers superior mobile touch support, modern ES6 architecture, and better zoom capabilities. PhotoSwipe vs. Fancybox: Both are excellent; Fancybox offers more built-in features while PhotoSwipe is lighter and more customizable. PhotoSwipe vs. GLightbox: Similar modern approaches; PhotoSwipe has longer track record and larger community.