Fancybox для WordPress
-
Ребятушки, миленькие, помогите, пожалуйста!
Я лузер в javascript, очень нужна помощь
Есть fancybox, на сайте галерея товаров, нужно добавить кнопочку «заказать сейчас» к каждой картинке в окне fancybox, чтобы по кнопочке открывалось окно с формой заказа, после закрытия формы пользователь должен возвращаться к картинке в окне fancybox и продолжить просмотр, т.е. она не должна закрываться при открытии формы.Ссылку-кнопку добавила в Title фэнсибокса, файл jquery.fancybox.js, строка 52 (добавила в Title тег ):
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 вместо тега , туда же добавила форму, в начало страницы (в head) добавила css, а вот сам скрипт вообще не понимаю, куда надо вставлять.
Разъясните, кто может, пожалуйста!
Тема «Fancybox для WordPress» закрыта для новых ответов.