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;
});