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