How to bind a generated fancybox to a button?

[cascading-jox]

Hi! Is it possible to do something like this code below but with Fancybox.bind?

let htmlContent = '<div id=\"container\">Hello fancybox</div>';
Fancybox.show([{ src: htmlContent, type: 'html' }]);

In the old jQuery version it would look something like this:

$('#button-id').fancybox({
    content: htmlContent
});

[fancyapps]

Hi,

That old syntax looks confusing, doesn't it? Therefore, it is no longer supported and a clearer syntax is proposed, example:

let htmlContent = '<div id="container">Hello fancybox</div>';

document.getElementById("button-id").addEventListener("click", () => {
  Fancybox.show([{ src: htmlContent, type: "html" }]);
});

https://fancyapps.com/playground/KK

[cascading-jox]

Thank you for the swift response!

It does indeed. I see, I got a bit confused on what to use bind() for. Is bind only used to override the default fancybox click handler that is initiated via the data-fancybox attribute?

[fancyapps]

Use bind() to attach default click handler to the selector. Here - https://github.com/fancyapps/ui/blob/main/src/Fancybox/Fancybox.js#L1496 - is the default selector. When you call bind() multiple times with the same selector, you are just overwriting options (for that selector).
btw, information about selectors and options is stored inside Fancybox.openers Map object.