Исправление ошибки перезапуска Fancybox после AJAX в Битрикс

При работе с компонентом catalog.element в Битрикс часто возникает необходимость переинициализации плагинов после AJAX-загрузки контента. Для слайдера Glide.js аналогичный подход работает корректно, но с Fancybox появляется ошибка:

TypeError: fancyboxInstance.destroy is not a function

Проблема возникает из-за того, что метод destroy() отсутствует в текущей версии Fancybox. Вместо него следует использовать правильные методы API.

Корректное решение

Вот исправленный код, который гарантированно работает с современными версиями Fancybox:

let fancyboxInstance = null;

document.addEventListener('DOMContentLoaded', function() {
    createOrUpdateFancybox();
});

BX.addCustomEvent("onAjaxSuccess", function() {
    createOrUpdateFancybox();
});

function createOrUpdateFancybox() {
    const slElements = document.querySelectorAll('[data-fancybox]');
    const slExist = slElements.length > 0;

    if (!slExist) return;

    // Правильное уничтожение существующего экземпляра
    if (fancyboxInstance) {
        fancyboxInstance.destroy(); // Для версий Fancybox 3.x и ниже
        // fancyboxInstance.close(); // Альтернативный метод
        // Fancybox.close(); // Для версий Fancybox 4.x
    }

    // Создание нового экземпляра
    fancyboxInstance = Fancybox.bind('[data-fancybox]', {
        // Ваши настройки Fancybox
    });
}

Ключевые моменты реализации

  • Проверка версии Fancybox: Уточните, какая версия библиотеки используется в вашем проекте
  • Альтернативные методы: В зависимости от версии могут работать:
    • fancyboxInstance.destroy() (Fancybox 3.x)
    • fancyboxInstance.close()
    • Fancybox.close() (Fancybox 4.x)
    • Fancybox.destroy()
  • Полная переинициализация: Иногда проще полностью удалить все обработчики и создать Fancybox заново

Рекомендации по отладке

  1. Проверьте консоль на наличие других ошибок загрузки Fancybox
  2. Убедитесь, что библиотека Fancybox загружается корректно после AJAX
  3. Используйте console.log(typeof fancyboxInstance) для проверки типа объекта
  4. Изучите документацию Fancybox для вашей конкретной версии

Это решение устранит ошибку и обеспечит корректную работу галереи при динамической загрузке контента в компонентах Битрикс.