Сообщений в теме: 10

[z1129]

Здравствуйте.

Возможно ли, чтоб яндекс карты ( интерактивные ) открывались во всплывающем окне?
Чтоб  кликнул по ссылке и появлялось окно с картой.

SL-203304

[Сake]

Да, это реализовать можно. В файл main.js вам понадобится добавить код вида

$(function() {
  $('.viewMaps').click(function() {
	var winp = window.open('', '','height=800,width=800,toolbar=no,'
			+ 'titlebar=0,status=0,menubar=yes,location= no,scrollbars=1');
	winp.document.write('Код вашей карты');
	return (false);
  });
});

где в качестве текста "Код вашей карты" вам необходимо будет вставить в одинарные кавычки код вашей сгенерированной карты (код карты не должен в себе содержать одинарные кавычки и символы переноса строки). В самом же шаблоне или созданной странице используйте ссылку на карту вида

<a href="#" class="viewMaps">Показать карту</a>

[z1129]

Я так попробовал - при нажатии на ссылку появилось новое пустое окно .

А можно, чтоб вот в таком окне    ?

Как такие окна вызывать я тут видел http://forum.storela...плывающее-окно/ , но как в него запихнуть код с картой не видел.

[Vaccina]

Лучше тогда использовать сл.тему:
http://forum.storela...post__p__147814

только изменим немного код:

<!-- Обратный звонок -->
		 <div class="iframe_block_back1" style="display:none;"><center>
								 <form method="post" action="{FEEDBACK_URL}" class="call_back" enctype="multipart/form-data">
									 <div class="section-caption c-orange"><strong>Заказать обратный звонок</strong></div>
									 <div class="iframe_click">
								

									 {% IF FORM_NOTICE %}<h3 class="red">{FORM_NOTICE | nl2br}</h3><br />{% ENDIF %}
									 <label for="feedback_name">Имя: <span class="red">*</span></label>
									 <input id="feedback_name" name="form[feedback_name]" value="" pattern=".{3,}" minlength="3" type="text" required="required" class="input required" />
									 <br /><label for="feedback_message">Телефон: <span class="red">*</span> +7</label>
									 <input id="feedback_message" name="form[feedback_message]" pattern=".{3,}" required="required" class="required input" type="tel" value="" minlength="5" />
								
									 <input id="feedback_еmail" name="form[feedback_email]" value="info@geekzona.ru" type="hidden" />
								
									 <br /><label for="feedback_clock">Дополнительно</label>
									 <textarea id="feedback_clock" name="form[feedback_clock]" pattern=".{3,}" value="" minlength="5" class="input" rows="3"></textarea>
									 <input type="submit" class="button_med" value="Позвоните мне" />

									 </div>
								 </form>
							 </center></div>
							 <div class="oneclick_s1"><a class="zakaz" id="openFlippingBook" title="Обратный звонок" href="#">Заказать звонок</a></div>
						
<script type="text/javascript">
$('a#openFlippingBook').click(function(e) {
e.preventDefault();
var width = 500;
var height = 300;
var content = $('.iframe_block_back1').children().clone(true).addClass('formback');
$.fn.nyroModalManual({
width: width,
height: height,
content: content,
minWidth: width,
minHeight: height,
gallery: null,
endShowContent: function() {
	 $('form').append('<input type="hidden" name="hash" value="{HASH}" />');
	 $(".formback form").validate({
		 submitHandler: function(form) {
				 $(form).find('#feedback_message').val($(form).find('#feedback_message').val() + ' Дополнительно: '
				 + $(form).find('#feedback_clock').val());
				 $(form).hide().before('<center>Подождите, идет отправка формы...</center>');
				 form.submit();
		 },
		 rules: {
		 'form[feedback_name]': {
				 required: true,
				 minlength: 3
			 },
			 'form[feedback_message]': {
				 required: true,
				 minlength: 3
			 }
		 }
	 });
}
});
});
</script>
		 <!-- end Обратный звонок -->

меняем на:

		 <div class="iframe_block_back1" style="display:none;">
тут вставляем код карты
</div>
		 <div class="oneclick_s1"><a class="zakaz" id="openFlippingBook" title="Карта" href="#">Показать на карте</a></div>
						
<script type="text/javascript">
$('a#openFlippingBook').click(function(e) {
e.preventDefault();
var width = 500;
var height = 300;
var content = $('.iframe_block_back1').children().clone(true).addClass('formback');
$.fn.nyroModalManual({
width: width,
height: height,
content: content,
minWidth: width,
minHeight: height,
gallery: null
});
});
</script>

не забудьте вставить код карты

[z1129]

Пока появляется пустое окно. Может я что-нибудь не дописал?

Вот код, который у меня

<div class="iframe_block_back1" style="display:none;">
<script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=HE_yr1BKgvtIu6ELRJDrxC_yEBYECJkR&width=600&height=450"></script>
</div>
			<div class="oneclick_s1"><a class="zakaz" id="openFlippingBook" title="Карта" href="#">Показать на карте</a></div>
											
<script type="text/javascript">
$('a#openFlippingBook').click(function(e) {
e.preventDefault();
var width = 500;
var height = 300;
var content = $('.iframe_block_back1').children().clone(true).addClass('formback');
$.fn.nyroModalManual({
width: width,
height: height,
content: content,
minWidth: width,
minHeight: height,
gallery: null
});
});
</script>

[Сake]

В данном случае проблема вероятно связанна с отображением содержимого nyroModal. В ранее приведенном мною коде не хватало тега <body> поверх <script>. Повторите инструкцию еще раз, только в main.js уже добавляйте

$(function() {
  $('.viewMaps').click(function() {
		var winp = window.open('', '','height=465,width=615,toolbar=no,'
						+ 'titlebar=0,status=0,menubar=yes,location= no,scrollbars=1');		   
		winp.document.write('<body><script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=HE_yr1BKgvtIu6ELRJDrxC_yEBYECJkR&width=600&height=450"></script></body>');
		return (false);
  });
});

а в шаблон все так же строку

<a href="#" class="viewMaps">Показать карту</a>

После этого карта будет отображаться в сплывающем окне.

[z1129]

С добавлением <body> поверх <script> все получилось:   . Спасибо огромное.

А может все-таки есть возможность, чтоб карта отображалась именно в таком окне   ?

Не хочу показаться привередой, просто очень надо, чтоб все появляющиеся на сайте окна были одинаковыми. Если есть время, помогите, пожалуйста.

[Сake]

Реализовать подобное отображение будет затруднительно, так как понадобится подключение другой библиотеки модального окна (fancybox), а у же с помощью неё попробовать реализовать задуманное. Но это так же не даст желаемый результат, так как визуально модальное окно (fancybox) будет отличатся от используемого по умолчанию (nyroModal).

[z1129]

Понятно. Еще раз спасибо.

[z1129]

Здравствуйте.

У меня получилось сделать карту в окне nyroModal: создал страницу, где есть только блок с картой и воспользовался этим кодом

<a href="#" id="openFlippingBook">Открыть публикацию</a>
&lt;script type="text/javascript">
$('a#openFlippingBook').click(function(e) {
 e.preventDefault();
 var width = 400;
 var height = 80;
 var content = '<iframe src="Ссылка на FlippingBook" width="'+width+'" height="'+height+'" align="left">Ваш браузер не поддерживает плавающие фреймы!</iframe>';
 $.fn.nyroModalManual({
 width: width,
 height: height,
 content: content,
 minWidth: width,
 minHeight: height,	 
 gallery: null  
 });
 return(false);
}); 
</script>

Вроде все работает

Вот только у меня на сайте ссылки для просмотра карты есть в 3х местах и, получается, что этот код я тоже в 3х местах написал ( в HTML и на двух страницах ).

Можно ли как-нибудь вынести отдельно этот код в одно место?

[z1129]

Извините, вроде сам разобрался.