Форум

kuzyaka · #1 (**permalink**) 27.02.2017, 14:48

Имеем фотогалерею с просмотром на fancyBox.
Нужно как-то добавить кнопку "ЗАКАЗАТЬ" рядом с фото в окне fancyBox, при нажатии на которую открывалась бы другое всплывающее окно с формой заказа.
Окно fancyBox желательно на это время скрыть, а после отправки заказа, опять включить.

Это как-то сделать можно?

рони · #2 (**permalink**) 27.02.2017, 15:20

kuzyaka,
в документации прописано как добавлять своё содержимое -- http://fancyapps.com/fancybox/ Append custom content

kuzyaka · #3 (**permalink**) 27.02.2017, 15:31

Сообщение от рони

kuzyaka,
в документации прописано как добавлять своё содержимое -- http://fancyapps.com/fancybox/ Append custom content

Это я видел, и примеры смотрел, только там вроде как речь идет о смене содержимого.
Можно например создать форму с кнопкой и ею добавлять текст в этой же форме или сменить форму с текстом на форму с фото, а вот как прилепить свою кнопку рядом с фото этого я чего то не узрел.
И про Append custom content я чего то там ничего не заметил.

Я то новичок в этом деле, поэтому мог чего и не уразуметь в документации, потому и спросил - в принципе такое возможно?
И если да, то в какую сторону смотреть и где копать?

рони · #4 (**permalink**) 27.02.2017, 15:37

kuzyaka,
не понимаю -- пример там есть, посмотрите, добавьте кнопку, на кнопку вызов формы заказа .

http://jsfiddle.net/svsdx/

afterLoad   : function() {
        
        this.content = 'моя кнопка' + this.content.html();
$('моя кнопка' ).жмак(открыть окно для заказа)
    }

kuzyaka · #5 (**permalink**) 27.02.2017, 15:48

рони,
Ну наконец то разглядел где там смотреть примеры - в Tips & tricks оказывается.
Попробую пописать и если что пойдет не так, спрошу еще.
Во всяком случае спасибо за надежду, что такое вроде как возможно.

PS
Пока мы с вами тут разговаривали уже появился fancyBox3

рони · #6 (**permalink**) 27.02.2017, 16:53

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>

kuzyaka · #7 (**permalink**) 27.02.2017, 20:16

рони,
Ну, что тут про такое можно сказать?
Не форум, а сказка с картинками.
Буду медитировать, благо 3 версия как раз подоспела.

И небольшой вопрос, просто заодно уж:
А как быть с лицензированием на применение fancyBox на своем сайте?
Есть ли какая нужда этим заморачиваться?

рони · #8 (**permalink**) 27.02.2017, 20:23

kuzyaka,
только в 3 увидел предложение оплатить.

kuzyaka · #9 (**permalink**) 27.02.2017, 20:40

рони,
Во 2-ой версии это тоже было, это даже видно из

Цитата:

I already have a fancyBox 2 license. Do I need to upgrade it?

Я так понимаю, что использовать fancyBox на своем сайте технически проблем не составляет, а вот юридически есть ли какие то угрозы?

Rise · #10 (**permalink**) 28.02.2017, 02:03

kuzyaka, да вроде как оно было free и commercial так и осталось, только обновили CC BY-NC 3.0 на GNU GPLv3.

Форум

Справочник

Discord чат

Курсы javascript