Как отобразить значок загрузки с помощью библиотеки fancy box 3

Question

Я использую новейшую библиотеку fancybox 3. Я пытаюсь показать значок загрузки. Я просмотрел документы ( https://fancyapps.com/fancybox/3/docs/), но это мне не сильно помогло. Я вижу несколько методов, таких как showLoading() и hideLoading(), но их ошибки в консоли браузера выглядят так, как будто они не являются функциями.

Со старой библиотекой fancybox, т.е. fancybox 1, я смог сделать это, напрямую вызвав функции. Может ли кто-нибудь помочь мне с последней библиотекой?

Answer 1

Чтобы показать анимацию загрузки программно, вам нужно сделать это в активном экземпляре FancyBox:

// Get the opened instance of fancybox
var instance = $.fancybox.getInstance();

или если вы открываете их программно:

// Get the initialized fancybox
var instance = $.fancybox.open({
    // Your content and options
});

Затем вы можете показать или скрыть загрузочную анимацию для экземпляра следующим образом:

instance.showLoading( slide );
instance.hideLoading( slide );

Анимация загрузки должна быть показана / скрыта на определенном слайде.

Чтобы настроить загрузочную анимацию, вы можете переопределить шаблон загрузки по умолчанию. Тогда CSS зависит от вас:

// Changes the loading animation when opening a new instance
$.fancybox.open({

    // Loading indicator template
    spinnerTpl: '<div class="your-animation"></div>'

});

// Overrides the default template for all instances
$.fancybox.defaults.spinnerTpl: '<div class="your-animation"></div>';

Вы можете найти больше информации о параметрах FancyBox и методах API здесь.

Надеюсь, поможет.