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