How to initialization lightbox component?

Design help Custom code
1

Hello,
Question webflow developers like me to initialization lightbox component? I add a lightbox component to a page method JQuery.html () ;, but it does not work :frowning:

3 
$('.fruit-photos').html('<a href="#" class="w-lightbox w-inline-block fruit-photo modal-lightbox"><img src="images/fruit-map-min-21.jpg">\
            <div class="fruit-photo-hover"><img width="61" src="images/search-icon.png" class="zoom-image"></div>\
            <script type="application/json" class="w-json">\
              { "group": "Лонган", "items": [{\
                "_id": "5675d1a64ebd9a027a716087",\
                "cdnUrl": "https://daks2k3a4ib2z.cloudfront.net/567166b52361c85913cdea45/5675d1a64ebd9a027a716087_00002.jpg",\
                "fileName": "5675d1a64ebd9a027a716087_00002.jpg",\
                "origFileName": "00002.jpg",\
                "width": 1600,\
                "height": 1200,\
                "fileSize": 843416,\
                "type": "image",\
                "url": "images/00002.jpg"\
              }] }\
            </script>\
          </a>');');
$('.modal-lightbox').webflowLightBox();
4

It may have an idea how to run WebFlow interaction ? <a data-ix="intName"> </a>?

5

I’m a bit confused, you know Webflow has a lightbox component built in? No custom code needed.

6

Webflow components work only when they are already on the page, if I will dynamically load the lightbox Links that they will not work. Similarly, with interactions.