Как добавить текст в Fancy Box Loader
При нажатии на ссылку мне нужно загрузить огромный pdf файл на обложке FancyBox. Пока PDF не загружен, я показываю загрузчик FancyBox. Проблема в том, что мне нужно добавить в загрузчик FancyBox текст "Подождите... и т.д.". Может ли кто-нибудь помочь?
Это мой код:
<p>
<a class="fancypdf" href="hugepdf.pdf">Click
Here To View The PDF</a>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".fancypdf").click(function(event) {
$.fancybox.open(this.href, {
type : "iframe"
});
$.fancybox.showLoading();
$("iframe.fancybox-iframe").load(function() {
$.fancybox.hideLoading();
content: {
text: 'Loading...',}
});
event.preventDefault();
});
});
</script>
P.S.
Вы можете изменить следующую скрипту.
DEMO
Ответы
Ответ 1
Пожалуйста, ознакомьтесь с нижеприведенными изменениями:
Обновлена ссылка Fiddle: http://jsfiddle.net/PudLq/619/
1) добавлен класс CSS как:
#fancybox-loading{
background-repeat: no-repeat;
background-position: center -108px;
text-align: center;
}
#fancybox-loading div{
margin: auto;
}
.overrideLoading{
background: none !important;
color: white;
width: 92px !important;
}
2) после показа анимации загрузки; изменяя загрузку div HTML в соответствии с нашей потребностью следующим образом:
$.fancybox.showLoading();
$('#fancybox-loading').append("<div class='overrideLoading'>Please Wait...</div>");
3) О скрытии анимации; Как было предложено "rockmandew", абсолютно нет необходимости возвращать наши изменения HTML/CSS. При вызове $.fancybox.showLoading()
снова напрямую; анимация загрузки по умолчанию будет показана пользователю. Я протестировал его и добавил еще одну ссылку в скрипте, чтобы показать анимацию загрузки по умолчанию. Нажмите "Показать загрузку по умолчанию", чтобы увидеть этот эффект.
Надеюсь, это поможет вам.
Ответ 2
После ответов на vijayP:
JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
Я изменил его класс CSS "overrideLoading":
.overrideLoading{
background: none !important;
color: white;
position: absolute;
top: 42px;
}
Как вы можете видеть, я добавил "положение: абсолютное" и "верхнее" положение - вы можете изменить это, но вам нужно, чтобы он появился.
Затем я изменил его jQuery, который я модифицировал, чтобы фактически добавить новый элемент:
$('#fancybox-loading div').append("<div class='overrideLoading'>Please Wait...</div>");
Как вы можете видеть, это уменьшило требуемый jQuery до одной строки.
Наконец, я удалил последнюю часть функции, которая удаляла класс. Поскольку это больше не требуется, вы можете просто сохранить вызов "hideLoading" FancyBox.
В целях обучения я удалил из последней функции следующее:
$('#fancybox-loading div').removeClass("overrideLoading");
$('#fancybox-loading div').text("");
Опять же, вот JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
Первое обновление:
Я увидел, что первый пользователь должен ответить, обновить свой ответ и во время работы, я бы предложил как можно больше отбросить "важные" теги. Я тоже уточнил свой ответ и разработал решение, которое не использовало никаких важных тэгов.
Я заметил более ранний комментарий от вас, в котором указано, что вы хотите настроить таргетинг на определенные накладки загрузки - что делает эта функция: выбирает каждый элемент "#overlay", которому предшествует элемент "#target" - вы можете вставить любую цель, которую вы хотите.
-
Я удалил все экземпляры тега "! important" - это просто лучшая/стандартная практика.
.overrideLoading{
color: white;
position: absolute;
top: 86px;
left: 16px;
}
Обновлен JsFiddle: https://jsfiddle.net/rockmandew/kmfeppec/7/
Ответ 3
У меня не было шанса настроить результирующее позиционирование, немного отличающееся от центра, но это может быть более простое решение:
http://jsfiddle.net/PudLq/621/
Просто добавьте текст в псевдо-элемент :after
с помощью правила content:
и измените стили загружаемой обертки для размещения.
здесь добавлен CSS:
#fancybox-loading {
background: #000;
padding: 5px;
border-radius: 6px;}
#fancybox-loading:after {
content:"Please wait...";
display:inline-block;
color:#fff;}
#fancybox-loading div {margin:auto;}
Ответ 4
Вот разветвленная версия Fiddle.
Я в основном span
с текстом "Please Wait". Затем я применил CSS для этого, чтобы разместить его так же, как и с #fancybox-loading
.
Вот новый код javascript -
$(".on").click(function () {
var target = $('#target');
var overlay = $('#overlay');
overlay.width(target.width()).height(target.height()).css({
'left': target.position().left,
'top': target.position().top
}).fadeIn(200);
$.fancybox.showLoading();
$('#fancybox-loading').css({
'left': (target.width() - $('#fancybox-loading').width()) / 2,
'top': (target.height() - $('#fancybox-loading').height()) / 2,
'margin': 0
});
var labelWidth = 80;
$('body').append($('<span>', {
'class': 'waitText'
}).text("Please Wait").css({
'width': labelWidth,
'left': (target.width() - labelWidth) / 2,
'top': ((target.height() - $('#fancybox-loading').height()) / 2) + $('#fancybox-loading').height()
}));
});
$(".off").click(function () {
$('#overlay').fadeOut(200);
$.fancybox.hideLoading();
$('.waitText').remove();
});
И мой новый CSS -
.waitText {
position: fixed;
margin: auto;
color: white;
text-align: center;
}