Skip to main content

Filters

Filters allow to modify data, they expect to have something returned back to them.

numItems

Modify the total amount of slides. Example on Data sources page.

lightbox.addFilter('numItems', (numItems, dataSource) => {
return numItems;
});

itemData

Modify slide item data. Example on Data sources page.

lightbox.addFilter('itemData', (itemData, index) => {
return itemData;
});

domItemData

Modify item data when it's parsed from DOM element. Example on Data sources page.

lightbox.addFilter('domItemData', (itemData, element, linkEl) => {
return itemData;
});

clickedIndex

Modify clicked gallery item index.

lightbox.addFilter('clickedIndex', (clickedIndex, e) => {
return clickedIndex;
});

placeholderSrc

Modify placeholder image source.

lightbox.addFilter('placeholderSrc', (placeholderSrc, content) => {
return placeholderSrc;
});

isContentLoading

Modify if the content is currently loading.

lightbox.addFilter('isContentLoading', (isContentLoading, content) => {
return isContentLoading;
});

isContentZoomable

Modify if the content can be zoomed.

lightbox.addFilter('isContentZoomable', (isContentZoomable, content) => {
return isContentZoomable;
});

useContentPlaceholder

Modify if the placeholder should be used for the content.

lightbox.addFilter('useContentPlaceholder', (useContentPlaceholder, content) => {
return useContentPlaceholder;
});

isKeepingPlaceholder

Modify if the placeholder should be kept after the content is loaded.

lightbox.addFilter('isKeepingPlaceholder', (isKeepingPlaceholder, content) => {
return isKeepingPlaceholder;
});

contentErrorElement

Modify an element when the content has error state (for example, if image cannot be loaded).

import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery--content-error-element',
children: 'a',
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.addFilter('contentErrorElement', (contentErrorElement, content) => {
const el = document.createElement('div');
el.className = 'pswp__error-msg';
el.innerHTML = `<a href="${content.data.src}" target="_blank">The image #${content.slide.index + 1}</a> cannot be loaded</a>`;
return el;
});
lightbox.init();

uiElement

Modify a UI element that's being created.

import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery--test-ui-element-filter',
children: 'a',
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.addFilter('uiElement', (element, data) => {
if (data.name === 'arrowNext') {
element.style.background = 'red';
}
return element;
});
lightbox.init();

thumbEl

Modify the thubmnail element from which opening zoom animation starts or ends.

lightbox.addFilter('thumbEl', (thumbnail, itemData, index) => {
return thumbnail;
});

thumbBounds

Modify the thubmnail bounds from which opening zoom animation starts or ends.

lightbox.addFilter('thumbBounds', (thumbBounds, itemData, index) => {
return thumbBounds;
});