fancyapps / ui

A library of JavaScript UI components, includes the best lightbox - Fancybox5
https://fancyapps.com/
Other
819 stars 98 forks source link

use fancybox to open a just-created dom #677

Open yangjianhua opened 3 months ago

yangjianhua commented 3 months ago

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 commented 3 months ago

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.