Custom selector for initializing lightbox?

[seamofreality]

Hey there,

I'm really keen to use your lightbox library but I've run into the limitation that I can't trigger it using a custom selector. Unfortunately I have no influence on the link markup wrapped around the images, so I can't add the data attribute directly. I also wanted to avoid adding the data attribute programmatically if possible.

Is there a way to use a custom selector?

Thanks!

[banthagroup]

No using custom selector is not possible. However you can open lightbox programmatically: https://fslightbox.com/javascript/documentation/how-to-use#programmatically

[imitronov]

require('fslightbox')

function initGallery(selector) {
  const blocks = document.querySelectorAll(`${selector}`)
  if (blocks.length > 0) {
    blocks.forEach(block => {
      const items = block.querySelectorAll('a')
      if (items.length > 0) {
        const lightbox = new window.FsLightbox()
        lightbox.props.sources = []
        items.forEach((item, key) => {
          lightbox.props.sources.push(item.getAttribute('href'));
          item.addEventListener('click', e => {
            e.preventDefault()
            lightbox.open(key)
          })
        });
      }
    })
  }
}

document.addEventListener('DOMContentLoaded', () => {
  if (document.querySelector('.wp-block-gallery')) {
    initGallery('.wp-block-gallery')
  }
})

[piotrzdziarski]

@imitronov provided a programmatic solution. A solution with using solely markup is not possible.