Прелоадер в Fancybox 3

Прелоадер в Fancybox 3

Плагин галерей Fancybox имеет встроенную функцию прелоадера (show loading), что удобно использовать в своих целях – при загрузки, долгих расчетов и т.д.

В Fancybox 2 были отдельные методы $.fancybox.showLoading() и $.fancybox.hideLoading(), в третей версии их удалили, но есть другой вариант:

var f_instance;
function showLoading(){
	f_instance = $.fancybox.open({
		content: '',
		type: 'html',
		smallBtn: false,
		baseClass: 'exfancybox-loading',
		afterShow: function(instance, current){instance.showLoading(current);}
	});
}

function closeLoading(){
	f_instance.close();
}
JS

Теперь открыть или закрыть прелоадер можно функциями showLoading() и closeLoading().

<a id="btn" href="#">
	Открыть прелоадер Fancybox
</a>

<script src="/jquery.min.js"></script>
<script src="/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="/jquery.fancybox.min.css">

<script>
var f_instance;
function showLoading(){
	f_instance = $.fancybox.open({
		content: '',
		type: 'html',
		smallBtn: false,
		baseClass: 'exfancybox-loading',
		afterShow: function(instance, current){instance.showLoading(current);}
	});
}

function closeLoading(){
	f_instance.close();
}

$('#btn').click(function(){
	showLoading();
	setTimeout(function(){
		closeLoading();
	}, 10000);	
	return false;
});
</script>
HTML

Результат:

27.04.2022
2433
Предыдущая запись XML-файл объявлений для Авито
Следующая запись Редирект с HTTPS на HTTP

Комментарии 1

Александр Леонов Александр Леонов
6 августа 2023 в 15:21
Я еще проще так:
function showLoading(){
	$('body').append('<div class="fancybox-container exfancybox-loading"><div class="fancybox-bg"></div><div class="fancybox-stage"><div class="fancybox-loading"></div></div></div>');
}
 
function closeLoading(){
	$('.fancybox-container').remove();
}

, чтобы добавить комментарий.

Другие публикации

Модальные окна на Fancybox 2
Fancybox 2 не только плагин галерей, но и модальных окон, рассмотрим подробнее.
23697
+4
Таймер и задержка в JS
В JS для работы с «планированием вызова» существуют два метода...
48732
+2
Склонение слов после числительных в PHP
В интернет магазинах, CRM и других сервисах для «правильности» есть необходимость склонять существительных после чисел...
23723
+8
Табы/вкладки на jQuery
Сделать табы на jQuery очень просто, сделаем HTML разметку и добавим к нему JS код...
32112
+7
Список серверов Whois
В данной таблице собраны все WHOIS-серверы (43-й порт), которые предоставляют информацию о доменах.
7705
+3
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
52319
+21