Нужна кнопка рядом с фото на 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-ой версии это тоже было, это даже видно из Цитата:
|
|
| Часовой пояс GMT +3, время: 01:23. |