How to get data attributes off the image in the full screen from a custom button click in the toolbar?

[geolectric]

If I add a custom button to the toolbar, then on the button click, how can I get data attributes off the current image?

So, similar to the example code on the website:

const options = {
  Toolbar: {
    items: {
      myclick: {
        tpl: `<button class="f-button">Get Data</button>`,
        click: () => {
          # Get data-test attribute
        },
      },
    },
    display: {
      left: ["infobar"],
      middle: [],
      right: ["myclick", "close"],
    },
  },
};

How could I get the data-test value from the custom button click? Off either the <a> or <img> elements for the currently displayed full screen image?

<a href="image-b.jpeg" data-test="test" data-fancybox="gallery" data-caption="Caption #2">
  <img data-test="test" src="thumbnail-b.jpeg" />
</a>

<a href="image-b.jpeg" data-test="test" data-fancybox="gallery" data-caption="Caption #2">
  <img data-test="test" src="thumbnail-b.jpeg" />
</a>

[fancyapps]

Hi,

It would be like this (demo - https://jsfiddle.net/807d3sq2/):

click: (toolbar) => {
  console.log(toolbar.instance.getSlide().test);
}

If you need to get trigger element:

toolbar.instance.getSlide().triggerEl

[Craigy-]

Hello!

I need to get data in 'tpl' not in 'click' - can you help with some example?

[fancyapps]

Hi, What do you mean by data in 'tpl'? Any demo would help to give you an answer faster.

[Craigy-]

For example, I have:

<a href="G1_163.png" data-fancybox data-title="G1-1" data-caption="Caption"><img src="G1_163-185x.png" loading="lazy" alt="" /></a>

I want to get 'data-title' in toolbar like this:

Toolbar: {
  items: {
    title: {
      tpl: `<div class="fancybox__caption" id="fancybox__title">${dataset.title}</div>`
    }
  },
  display: {
    left: ['title']
  }
},

[fancyapps]

If you want to place caption inside the toolbar, you can do that - https://jsfiddle.net/j5ro7u0b/
If you want to retrieve current trigger element, use events like this - https://jsfiddle.net/p7do0gbh/ - then simply update HTML for your element.

And please don't be afraid to fork any demo on the home page to make a demo.