type: "html" fancybox with reusable src element will add multiple close buttons on repeated showings

[twilson90]

var element = $("<div>...</div>")[0];
...
button.onclick = ()=> {
  new Fancybox([{
      src: element,
      type: 'html',
  }]);
}

On first click of the button in the example, the src element will have a close button element added. But on repeated clicks, fancybox will continue to add the same close button. Not noticeable visually because they're stacked one ontop of the other, but noticeable in the dom.

[fancyapps]

Hi,

Actually, you were supposed to either use type: 'inline' or type: 'clone' when displaying DOM element. I guess the documentation was not clear enough, I will try to improve it.

[twilson90]

I looked and couldn't find any mention of those types in the v4 documentation.

I tried type: 'inline' but on creating the FancyBox instance, from deep within the Fancy code I get TypeError: Cannot read properties of null (reading 'insertBefore') Presumably it doesn't account for elements not already in the DOM?

type: 'clone' doesn't make sense in this case as the Element is generated once, not inserted into DOM (stored in memory), then re-used for each Fancybox.

[fancyapps]

This has been fixed in the last release. And, please, use https://github.com/fancyapps/ui repository.