{"library":"photoswipe","title":"PhotoSwipe JavaScript Image Gallery","description":"PhotoSwipe v5.4.4 is a highly customizable JavaScript image gallery and lightbox designed for touch devices. It supports common features like swiping, zooming, and pan gestures, and includes core and lightbox components for flexible integration. The library maintains an active release cadence, frequently publishing patch and minor versions to address bugs, enhance accessibility, and improve browser compatibility. Key differentiators include robust touch support, a modular architecture allowing for dynamic import of its core, extensive customization options via filters and options, and strong focus on accessibility (ARIA attributes, focus trapping) and offline functionality. It ships with TypeScript types, facilitating modern development workflows. It offers a significant rewrite compared to its v4 predecessor, focusing on modern web standards and modularity.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install photoswipe"],"cli":null},"imports":["import PhotoSwipeLightbox from 'photoswipe/lightbox';","import PhotoSwipe from 'photoswipe';","import 'photoswipe/photoswipe.css';","import type { PhotoSwipeOptions } from 'photoswipe';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import PhotoSwipeLightbox from 'photoswipe/lightbox';\nimport 'photoswipe/photoswipe.css';\n\n// 1. Define your gallery items in HTML with data attributes\n//    <div id=\"my-gallery\">\n//      <a href=\"full-image-1.jpg\" data-pswp-width=\"1200\" data-pswp-height=\"800\" target=\"_blank\">\n//        <img src=\"thumbnail-1.jpg\" alt=\"Image 1\">\n//      </a>\n//      <a href=\"full-image-2.jpg\" data-pswp-width=\"1000\" data-pswp-height=\"1500\" target=\"_blank\">\n//        <img src=\"thumbnail-2.jpg\" alt=\"Image 2\">\n//      </a>\n//    </div>\n\n// 2. Initialize the PhotoSwipe Lightbox\nconst lightbox = new PhotoSwipeLightbox({\n  gallery: '#my-gallery',       // Selector for the gallery container\n  children: 'a',                // Selector for individual gallery items\n  pswpModule: () => import('photoswipe'), // Dynamically import the core module\n  \n  // Optional: Set options for the core PhotoSwipe instance\n  // easing: 'cubic-bezier(.175, .885, .32, 1.275)',\n  // bgOpacity: 0.9,\n});\n\n// 3. Initialize the lightbox\nlightbox.init();\n\n// To open programmatically:\n// lightbox.loadAndOpen(0); // Opens the first item\n","lang":"typescript","description":"Demonstrates how to set up a basic PhotoSwipe gallery with multiple images using HTML data attributes and initialize the lightbox.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}