Why isn't Lightbox working?

Question

JavaScript

Good evening, lightbox does not work if it is added to the block using the .html() method;
When you click on the image of the fruit "Pitahaya" on the site
, the function is launched

$('#fruit-photos').html('<a href="#" class="w-lightbox w-inline-block fruit-photo"><div class="fruit-photo-hover"><img width="61" src="images/search-icon.png" class="zoom-image">\
        </div><img src="images/catalog-09.jpg">\
                  <script type="application/json" class="w-json">\
                    { "group": "питахайя", "items": [{ "url": "images/Tak-rastet-pitahayya.jpg", "fileName": "Tak-rastet-pitahayya.jpg", "origFileName": "Tak-rastet-pitahayya.jpg", "width": 599, "height": 354, "size": 113861, "type": "image" }] }\
                  </script>\
                </a>');

Which adds the Lightbox component

As a result, the lightbox does not work, as I understand it, this is due to the fact that it is loaded onto the page after the plugin itself has been initialized, please tell me how to start the plugin initialization correctly again, or another solution to the problem.

As far as I understand, the function is responsible for finding all the lightboxes on the page

Webflow.define('lightbox', module.exports = function($, _) {
    var api = {};
    var lightbox = createLightbox(window, document, $);
    var $doc = $(document);
    var $body;
    var $lightboxes;
    var designer;
    var inApp = Webflow.env();
    var namespace = '.w-lightbox';
    var groups;

    // -----------------------------------
    // Module methods

    api.ready = api.design = api.preview = init;

    // -----------------------------------
    // Private methods

    function init() {
      designer = inApp && Webflow.env('design');
      $body = $(document.body);

      // Reset Lightbox
      lightbox.destroy();

      // Reset groups
      groups = {};

      // Find all instances on the page
      $lightboxes = $doc.find(namespace);

      // Instantiate all lighboxes
      $lightboxes.webflowLightBox();
    }

    jQuery.fn.extend({
      webflowLightBox: function() {
        var $el = this;
        $.each($el, function(i, el) {
          // Store state in data
          var data = $.data(el, namespace);
          if (!data) {
            data = $.data(el, namespace, {
              el: $(el),
              mode: 'images',
              images: [],
              embed: ''
            });
          }

          // Remove old events
          data.el.off(namespace);

          // Set config from json script tag
          configure(data);

          // Add events based on mode
          if (designer) {
            data.el.on('setting' + namespace, configure.bind(null, data));
          } else {
            data.el
              .on('tap' + namespace, tapHandler(data))
              // Prevent page scrolling to top when clicking on lightbox triggers.
              .on('click' + namespace, function (e) { e.preventDefault(); });
          }
        });
      }
    });

namely the line

// Find all instances on the page
      $lightboxes = $doc.find(namespace);

how do i run this function? in the file framework.js line 2133

Answer 1

After executing your script - do

$('a.fruit-photo').lightBox();