Задать вопрос

Почему не работает Lightbox?

Добрый вечер, не работает lightbox если он добавляется в блок методом .html();
При нажатии на сайте на изображения фрукта "Питахайя" 9c8b0fa92e004cc2966f31132117b150.png
запускается функция
$('#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>');

Которая добавляет компонент Lightbox
9161d6e04f364c06a9cdec911230779b.png
В итоге, lightbox не работает, как я понял, это из-за того что он подгружается на страницу уже после инициализации самого плагина, подскажите пожалуйста, как правильно запустить инициализацию плагина заново, либо другой вариант решения проблемы.

На сколько я понял за поиск всех lightbox на странице отвечает функция
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(); });
	        }
	      });
	    }
	  });


а именно строка

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


как мне запустить эту функцию? в файле framework.js строка 2133
  • Вопрос задан
  • 798 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 1
После выполнения вашего скрипта - делайте
$('a.fruit-photo').lightBox();
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы