• Ребятушки, миленькие, помогите, пожалуйста!
    Я лузер в 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» закрыта для новых ответов.