Прелоадер в 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
1493
Предыдущая запись XML-файл объявлений для Авито
Следующая запись Редирект с HTTPS на HTTP

Комментарии

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

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

Модальные окна на Fancybox 2
Fancybox 2 не только плагин галерей, но и модальных окон, рассмотрим подробнее.
19313
+6
Таймер и задержка в JS
В JS для работы с «планированием вызова» существуют два метода...
39405
+1
Склонение слов после числительных в PHP
В интернет магазинах, CRM и других сервисах для «правильности» есть необходимость склонять существительных после чисел...
18642
+7
Табы/вкладки на jQuery
Сделать табы на jQuery очень просто, сделаем HTML разметку и добавим к нему JS код...
27347
+8
Список серверов Whois
В данной таблице собраны все WHOIS-серверы (43-й порт), которые предоставляют информацию о доменах.
5974
+3
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
45146
+22