use fancybox to open a just-created dom

[yangjianhua]

Describe the bug

I'm using Fancybox to show a tweet's all image and seems it doesn't work.

The idea is to get a tweet's all image dynamically and put it into a div, then use the document.body.appendChild to add the div into the page; then using Fancybox.bind to show, but returns nothing.

How could it be?

`function openFancyBox(clickedElement) { const imageContainer = clickedElement.closest('[aria-labelledby="modal-header"]'); if (!imageContainer) { console.error('Can not find image container!'); return []; }

const images = imageContainer.querySelectorAll('img[src*="pbs.twimg.com/media/"]');

html = "";
images.forEach(img => {
    src = img.src;
    src.replace(/&name=\w+$/, '&name=large');
    html = html + `<a href="${src}" data-fancybox="fancy-gallery">
        <img src="${src}" />
    </a>`;

});

const wrap = document.getElementById("gallery-wrap")
if (!wrap) {
    const newElement = document.createElement('div');
    newElement.innerHTML = html;
    newElement.id = "gallery-wrap";
    document.body.appendChild(newElement);
}

Fancybox.bind('[data-fancybox="fancy-gallery"]', {

});

}`

Reproduction

like describe.

Additional context

No response

[fancyapps]

Hi,

If you write Fancybox.bind(SELECTOR), that code could be "translated" to English like this - "when user clicks element matching my CSS selector SELECTOR, start Fancybox using this element".

But, if you want to immediately start Fancybox, you have to use other API methods. For example, Fancybox.fromSelector(SELECTOR). It would be best if you could create a demo using any code playground (like JSFiddle), then I could easily fork and get it working.