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

27.04.2022

2026

Плагин галерей 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();
}

Теперь открыть или закрыть прелоадер можно функциями 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

2026

1 2

Предыдущая запись XML-файл объявлений для Авито

Следующая запись Редирект с HTTPS на HTTP

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

Александр Леонов

6 августа 2023 в 15:21

-2

Я еще проще так:

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();
}

Ответить

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