Нужна кнопка рядом с фото на fancyBox.
Имеем фотогалерею с просмотром на fancyBox.
Нужно как-то добавить кнопку "ЗАКАЗАТЬ" рядом с фото в окне fancyBox, при нажатии на которую открывалась бы другое всплывающее окно с формой заказа. Окно fancyBox желательно на это время скрыть, а после отправки заказа, опять включить. Это как-то сделать можно? |
kuzyaka,
в документации прописано как добавлять своё содержимое -- http://fancyapps.com/fancybox/ Append custom content |
Цитата:
Можно например создать форму с кнопкой и ею добавлять текст в этой же форме или сменить форму с текстом на форму с фото, а вот как прилепить свою кнопку рядом с фото этого я чего то не узрел. И про Append custom content я чего то там ничего не заметил. Я то новичок в этом деле, поэтому мог чего и не уразуметь в документации, потому и спросил - в принципе такое возможно? И если да, то в какую сторону смотреть и где копать? |
kuzyaka,
не понимаю -- пример там есть, посмотрите, добавьте кнопку, на кнопку вызов формы заказа . http://jsfiddle.net/svsdx/
afterLoad : function() {
this.content = 'моя кнопка' + this.content.html();
$('моя кнопка' ).жмак(открыть окно для заказа)
}
|
рони,
Ну наконец то разглядел где там смотреть примеры - в Tips & tricks оказывается. Попробую пописать и если что пойдет не так, спрошу еще. Во всяком случае спасибо за надежду, что такое вроде как возможно. PS Пока мы с вами тут разговаривали уже появился fancyBox3 |
fancybox и кнопка заказа
kuzyaka,
спасибо за ссылку на fancyBox3 вариант для медитации о кнопке заказать ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fancyapps.com/fancybox/source/jquery.fancybox.css">
<style type="text/css">
.fancybox-inner a{
color : #000000;
margin-bottom: 2px;
display: inline-block;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title a{
color : #FFFFFF;
}
.check{
border: 5px solid #0000FF;
}
.fancybox-nav {
margin-top: 20px;
}
.fancybox-inner a{
color: #FF0000;
}
</style>
<script type='text/javascript' src="https://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script>
$(function() {
$(".modal").fancybox({
padding: [10, 10, 35, 10],
"afterLoad": function() {
var el = this.element;
var text = "Заказать";
var add = '<a href="" >' + text + "</a>";
this.tpl.image = add + '<img class="fancybox-image" src="{href}" alt="" />'
},
"afterShow": function() {
var el = this.element;
var id = $(el).data("id");
var link = $(".fancybox-inner a, .fancybox-title a");
link.click(function(event) {
event.preventDefault();
$.fancybox.open($("#info"), {
"type": "inline",
"afterLoad": function() {
$("#text_tag_input").val(id)
},
"afterClose": function() {
$(el).trigger("click")
}
})
})
}
})
});
</script>
</head>
<body>
<a class="modal" rel="1111" title="forum" data-id="0" href="http://fancyapps.com/fancybox/demo/1_b.jpg" ><img src="http://fancyapps.com/fancybox/demo/1_s.jpg"></a>
<a class="modal" rel="1111" title="forum" data-id="1" href="http://fancyapps.com/fancybox/demo/2_b.jpg" ><img src="http://fancyapps.com/fancybox/demo/2_s.jpg"></a>
<div id="info" style="display: none">
<input id="text_tag_input" type="text" name="tags" />
<div class="tags_select">
<a href="#">text1</a>
<a href="#">text2</a>
<a href="#">text3</a>
</div>
</div>
</body>
</html>
|
рони,
Ну, что тут про такое можно сказать? Не форум, а сказка с картинками. Буду медитировать, благо 3 версия как раз подоспела. И небольшой вопрос, просто заодно уж: А как быть с лицензированием на применение fancyBox на своем сайте? Есть ли какая нужда этим заморачиваться? |
kuzyaka,
только в 3 увидел предложение оплатить. |
рони,
Во 2-ой версии это тоже было, это даже видно из Цитата:
|
Rise,
Спасибо. А вот когда я его использую на сайте по продаже цветов, это коммерческое использование или non-profit website projects? |
А теперь вопрос опять по теме.
Спасибо рони, кнопку к окну с фото прилепить удалось, даже с картинкой. Только теперь возникла другая проблема. Это кнопка должна запускать форму заказа, которая отслеживает все кнопки с class="reservation" и при нажатии на них запускается. То, что уже работает выглядит так: Кнопка HTML: <a class="reservation" href="?ID=<?=$arElement["ID"]?>"> <img src="/design/butorder.png" height="24" width="92" align="right"/> </a>Код сканирования такой кнопки:
$('.<?if($arParams["NAME_CLASS"]!=""):?><?=$arParams["NAME_CLASS"]?><?else:?>___<?endif?>').click(function(){
AltasibReservation_runWindow($(this).attr('href'), $(this).attr('id'));
return false;
});
А у меня в fancyBox кнопка выглядит так:
$(function() {
$(".img_over a").fancybox({
padding: [10, 10, 35, 10],
"afterLoad": function() {
var button = '<img src="/design/butorderbig.png" height="31" width="117" align="left"/>';
var add = '<a href="?ID=1500" class="reservation">' + button + '</a>';
this.tpl.image = add + '<img class="fancybox-image" src="{href}" alt="" />'
}
})
});
И на неё код сканирования не реагирует. Может быть это связано с представлением кнопки не в виде HTML, а в виде script? |
Rise,
Спасибо, успокоили. Жду теперь, что скажет рони на мой последний вопрос по теме. |
Цитата:
примерно так
$("body").on("click", '.<?if($arParams["NAME_CLASS"]!=""):?><?=$arParams["NAME_CLASS"]?><?else:?>___<?endif?>', function(){
AltasibReservation_runWindow($(this).attr('href'), $(this).attr('id'));
return false;
})
либо инициализация после создания
"afterShow": function() {
var el = this.element;
var id = $(el).data("id");
var link = $(".fancybox-inner a, .fancybox-title a");
link.click(function(event) {
*!*
AltasibReservation_runWindow($(this).attr('href'), $(this).attr('id'));
*/!*
event.preventDefault();
$.fancybox.open($("#info"), {
"type": "inline",
"afterLoad": function() {
$("#text_tag_input").val(id)
},
"afterClose": function() {
$(el).trigger("click")
}
})
})
}
|
рони, слов нет ..., Вы действительно настоящий Профессор!
А благодаря магии javascript, еще и Волшебник! Спасибо большое, все заработало, как надо, кроме одного: окно fancyBox не возвращается после закрытия окна с формой заказа, в которой три варианта закрытия: кнопки "Х", "Отмена" и "Отправить", где после "Отправить" появляется еще одно окно с сообщением и кнопкой "Закрыть". |
kuzyaka,
ваша форма заказа должна после закрытия кликнуть но ссылке которое содержит фото -- то есть переоткрыть строка 14 пост
$(el).trigger("click")
el можно где-тосохранить глобально или присваивать класс , вам виднее |
| Часовой пояс GMT +3, время: 21:53. |