Skip to main content

API

Core concepts: since

Methods

PhotoSwipeLightbox methods

const lightbox = new PhotoSwipeLightbox({});

// initialize lightbox, should be called only once,
// it's not included in the main constructor, so you may bind events before it
lightbox.init();

PhotoSwipe core methods

You can access PhotoSwipe core instance only after lightbox is opened (for example, within beforeOpen event).

Basic methods:

const lightbox = new PhotoSwipeLightbox({});
lightbox.init();

lightbox.on('beforeOpen', () => {
const pswp = lightbox.pswp;

// go to slide by index
pswp.goTo(3);

// go to next slide
pswp.next();

// go to previous slide
pswp.prev();

// close the PhotoSwipe (with animation, if enabled)
// PhotoSwipe will automatically destroy after it's closed
pswp.close();
});

Zoom/pan methods

// Include Lightbox 
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';

const lightbox = new PhotoSwipeLightbox({
// may select multiple "galleries"
gallery: '#gallery--simple',

// Elements within gallery (slides)
children: 'a',

// setup PhotoSwipe Core dynamic import
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.init();
{ 
"template":"getting-started",
"id":"simple",
"displayHTML":true
}

Events

You don't need to unbind PhotoSwipe events or filters, they will automatically be unbound when PhotoSwipe is closed or destroyed.

// TODO

Filters

Properties

// TODO