PhotoSwipe

Try it in 3 steps

1. 1

   Install PhotoSwipe 5.4.4

   Pin the reviewed stable v5 release.

   npm install --save-exact photoswipe@5.4.4Copy
2. 2

   Create gallery markup with image dimensions

   Provide the large image URL and required data-pswp-width and data-pswp-height attributes on each link.

   <div id="my-gallery"><a href="large.jpg" data-pswp-width="1600" data-pswp-height="1200"><img src="thumb.jpg" alt=""></a></div>Copy
3. 3

   Initialize PhotoSwipeLightbox

   Let Lightbox dynamically load Core when needed and open gallery links in PhotoSwipe.

   import PhotoSwipeLightbox from 'photoswipe/lightbox'; import 'photoswipe/style.css'; const lightbox = new PhotoSwipeLightbox({ gallery: '#my-gallery', children: 'a', pswpModule: () => import('photoswipe') }); lightbox.init();Copy

Built with

• JavaScript

Categories and tags

GitHub data

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Explore next

• Bootstrap174,991 Stars

  4 shared tag(s)

  Build responsive interfaces from a CSS/Sass grid, utilities, components, and native JavaScript

  MDX
• Storybook91,200 Stars

  4 shared tag(s)

  capture UI states once and reuse them across docs, interaction tests, and agent tooling

  TypeScript
• Expo52,566 Stars

  4 shared tag(s)

  build React Native apps for Android, iOS, and web from one project model

  TypeScript
• Alpine.js31,960 Stars

  4 shared tag(s)

  add state, events, and display behavior directly to HTML for small interactive interfaces

  HTML
• Uppy31,010 Stars

  4 shared tag(s)

  compose file-selection UI and resumable uploads from plugins across local and remote sources

  TypeScript
• flatpickr16,464 Stars

  4 shared tag(s)

  pick dates, times, ranges, and multiple days with a dependency-free UI and configurable disabled dates and locales

  TypeScript