Редактирование Fancybox - добавление своей кнопки
Ребятушки, миленькие, помогите, пожалуйста!
Я лузер в javascript, очень нужна помощь Есть fancybox для Wordpress, на сайте галерея товаров, нужно добавить кнопочку "заказать сейчас" к каждой картинке в окне fancybox, чтобы по кнопочке открывалось окно с формой заказа, после закрытия формы пользователь должен возвращаться к картинке в окне fancybox и продолжить просмотр, т.е. она не должна закрываться при открытии формы. Ссылку-кнопку добавила в Title фэнсибокса, файл jquery.fancybox.js, строка 52 (добавила в Title тег a): d.titlePosition=="float"?'<table id="fancybox-title-float-wrap" cellpadding="0" cellspacing="0"><tr><td id="fancybox-title-float-left"></td><td id="fancybox-title-float-main"><a href="#">'+s+'</a></div></td><td id="fancybox-title-float-right"></td></tr></table>':'<div id="fancybox-title-'+d.titlePosition+'">'+s+"</div>":false;s=a;if(!(!s||s==="")){n.addClass("fancybox-title-"+d.titlePosition).html(s).appendTo("body").show();switch(d.titlePosition){case "inside":n.css({width:i.width-d.padding*2,marginLeft:d.padding,marginRight:d.padding}); Думала 2 решения: 1. Сделать отдельную страничку с формой form.php, и по ссылке в fancybox открывать ее (страничку) в отдельном всплывающем окне или в фэнсибоксе тоже. Для открытия в фэнсибоксе нужно поставить class="fancybox" для тега , ну и href указать соответственно, но это не работает, просто ничего не происходит... Для открытия в отдельном всплывающем окне нужно использовать следующую конструкцию: <a href="#" onclick="window.open('http://ya.ru','test', 'width=250,height=280,status=no,resizable=no,top=200,left=200'); return false;">open window</a> Но эта строчка в коде jquery.fancybox.js не работает, выдается ошибка, в адресе сайта не воспринимаются слэши //, идут как пробелы... Помогите, пожалуйста, мне все равно, хоть так, хоть так, главное, чтобы уже открытая картинка в фэнсибоксе не закрылась... 2. второй вариант такой: форму сделать на самом сайте, в блоке div, невидимой, а при нажатии делать его видимым и поверх всех окон. Нашла такой код: сама форма: <div class="popup-window"> <p class="close">x</p> <table><tr> <td>Имя:</td> <td><input type="text"/></td> </tr> <tr> <td>E-mail:</td> <td><input type="text"/></td> </tr> <tr> <td colspan="2" align="center"><input type="submit"/></td> </tr> </table> </div> форма, конечно, будет немного другая, но это не суть. css: <style type="text/css"> .popup-window{ //форма для заполнения display: none; box-shadow: 0px 0px 4px 0px rgb(70, 70, 70); -webkit-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70); -moz-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70); padding: 20px; background: white; z-index: 500; -webkit-border-radius: 5px!important; -moz-border-radius: 5px!important; border-radius: 5px!important; } .open{ //кнопка-ссылка text-decoration: underline; cursor: pointer; } .backpopup{ //тень display:none; width: 100%; height: 100%; position: fixed; background: rgb(105, 105, 105); opacity: 0.7; top: 0; left: 0; z-index: 400; cursor: pointer; } .close{ //кнопка закрытия окна float: right; cursor: pointer; right: 5px; top: 0px; position: absolute; padding: 4px; } </style> вставляем ссылку: <p class="open">Открыть всплывающее окно</p> <div class="backpopup"></div> ну и скрипт: <script type="text/javascript"> $.fn.popup = function() { //функция для открытия всплывающего окна: this.css('position', 'absolute').fadeIn(); //задаем абсолютное позиционирование и эффект открытия //махинации с положением сверху:учитывается высота самого блока, экрана и позиции на странице: this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px'); //слева задается отступ, учитывается ширина самого блока и половина ширины экрана this.css('left', ($(window).width() - this.width()) / 2 + 'px'); //открываем тень с эффектом: $('.backpopup').fadeIn(); } $(document).ready(function(){ //при загрузке страницы: $('.open').click(function(){ //событие клик на нашу ссылку $('.popup-window').popup(); //запускаем функцию на наш блок с формой }); $('.backpopup,.close').click(function(){ //событие клик на тень и крестик - закрываем окно и тень: $('.popup-window').fadeOut(); $('.backpopup').fadeOut(); }); }); </script> Для этого варианта я ссылку вставила в файл jquery.fancybox.js вместо тега A, туда же добавила форму, в начало страницы (в head) добавила css, а вот сам скрипт вообще не понимаю, куда надо вставлять. Разъясните, кто может, пожалуйста! |
И да, я понимаю, что без знаний полезла в дебри, и я почитаю, конечно же, все книжки и учебники по JavaScript, которые будут мне предложены в этой теме, я и сама понимаю, что нужно учиться, но эту задачу мне нужно реализовать до праздников (до 1 мая), помучавшись 3 дня сама, пришла к выводу, что без помощи мудрых, умных, самых замечательных программистов мне просто не обойтись :)
|
Часовой пояс GMT +3, время: 15:42. |