Skip to main content

Events

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

All events can be bound directly to lightbox, they'll automatically map to PhotoSwipe core when it's open.

Initialization events

import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery--test-init-events',
children: 'a',
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.on('beforeOpen', () => {
console.log('beforeOpen');
// photoswipe starts to open
});

lightbox.on('firstUpdate', () => {
console.log('firstUpdate');
// photoswipe keeps opening
// you may modify initial index or basic DOM structure
});

lightbox.on('initialLayout', () => {
console.log('initialLayout');
// photoswipe measures size of various elements
// if you need to read getBoundingClientRect of something - do it here
});

lightbox.on('change', () => {
// triggers when slide is switched, and at initialization
console.log('change');
});

lightbox.on('afterInit', () => {
console.log('afterInit');
// photoswipe fully initialized and opening transition is running (if available)
});

lightbox.on('bindEvents', () => {
console.log('bindEvents');
// photoswipe binds DOM events (such as pointer events, wheel, etc)
});
lightbox.init();

Opening or closing transition events

The events will trigger even if transition is disabled.

import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery--test-opening-closing-events',
children: 'a',
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.on('openingAnimationStart', () => {
console.log('openingAnimationStart');
});
lightbox.on('openingAnimationEnd', () => {
console.log('openingAnimationEnd');
});
lightbox.on('closingAnimationStart', () => {
console.log('closingAnimationStart');
});
lightbox.on('closingAnimationEnd', () => {
console.log('closingAnimationEnd');
});
lightbox.init();

Closing events

import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery--test-closing-events',
children: 'a',
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.on('close', () => {
// PhotoSwipe starts to close, unbind most events here
console.log('close');
});
lightbox.on('destroy', () => {
// PhotoSwipe is fully closed, destroy everything
console.log('destroy');
});
lightbox.init();

Pointer and gesture events

import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery--test-pointer-events',
children: 'a',
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.on('pointerDown', (e) => {
console.log('pointerDown', e.originalEvent);
});
lightbox.on('pointerMove', (e) => {
console.log('pointerMove', e.originalEvent);
});
lightbox.on('pointerUp', (e) => {
console.log('pointerUp', e.originalEvent);
});
lightbox.on('pinchClose', (e) => {
// triggered when using pinch to close gesture
// can be default prevented
console.log('pinchClose', e.bgOpacity);
});
lightbox.on('verticalDrag', (e) => {
// triggered when using vertical drag to close gesture
// can be default prevented
console.log('verticalDrag', e.panY);
});
lightbox.init();

Slide content events

Refer to Custom Content section of docs for examples.

import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
import PhotoSwipe from '/photoswipe/photoswipe.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery--test-content-events',
children: 'a',
pswpModule: PhotoSwipe
});
lightbox.on('contentInit', ({ content }) => {
console.log('contentInit', content);
});
lightbox.on('contentLoad', ({ content, isLazy }) => {
// content starts to load
// can be default prevented
// assign elements to `content.element`
console.log('contentLoad', content, isLazy);
});
lightbox.on('contentLoadImage', ({ content, isLazy }) => {
// similar to the previous one, but triggers only for image content
// can be default prevented
console.log('contentLoadImage', content, isLazy);
});
lightbox.on('loadComplete', ({ content, slide }) => {
console.log('loadComplete', content);
});
lightbox.on('contentResize', ({ content, width, height }) => {
// content will be resized
// can be default prevented
console.log('contentResize', content, width, height);
});
lightbox.on('imageSizeChange', ({ content, width, height, slide }) => {
// content.element is image
console.log('imageSizeChange', content, width, height, slide, slide.index);
});
lightbox.on('contentLazyLoad', ({ content }) => {
// content start to lazy-load
// can be default prevented
console.log('contentLazyLoad', content);
});
lightbox.on('contentAppend', ({ content }) => {
// content is added to dom
// can be default prevented
// content.slide.container.appendChild(content.element);
console.log('contentAppend', content);
});
lightbox.on('contentActivate', ({ content }) => {
// content becomes active (the current slide)
// can be default prevented
console.log('contentActivate', content);
});
lightbox.on('contentDeactivate', ({ content }) => {
// content becomes inactive
// can be default prevented
console.log('contentDeactivate', content);
});
lightbox.on('contentRemove', ({ content }) => {
// content is removed from DOM
// can be default prevented
console.log('contentRemove', content);
});
lightbox.on('contentDestroy', ({ content }) => {
// content will be destroyed
// can be default prevented
console.log('contentDestroy', content);
});
lightbox.init();