How to get data from the triggering item

[craigpotter]

Hi,

Loving the new version!
I've been looking at the show case and at the two panel layout example.
.
If you were to add addition data to the click item, an ID or something to then get the content dynamically how would you access the triggering item.

For example

<div class="flex flex-wrap gap-5 justify-center max-w-5xl mx-auto px-6">
  <a data-fancybox="gallery" data-id="5" href="https://lipsum.app/id/63/800x600">
    <img class="rounded" src="https://lipsum.app/id/63/200x150" />
  </a>
  <a data-fancybox="gallery" data-id="6" href="https://lipsum.app/id/64/800x600">
    <img class="rounded" src="https://lipsum.app/id/64/200x150" />
  </a>
</div>

In the initLayout event, you can access the Fancybox instance by passing it in but I am unsure how to access the trigging element to get the data-id.

Am I missing something in the docs ?

[fancyapps]

Hi,

It would be like this:

Fancybox.bind('[data-fancybox="gallery"]', {
  on : {
    initLayout : (fancybox) => {
      console.log(fancybox.options.$trigger);
    }
  }
});

Sorry, the docs are not complete yet. I am also planning to create a tutorial that would cover frequently asked questions.

[craigpotter]

Thanks for the fast reply!

I swear I did console.log(fancybox) and looked through everything ... not sure how I missed that!