Перейти к содержимому


sipsancho

Регистрация: 08 авг. 2016
Offline Активность: 24 янв. 2017 10:38
-----

#245367 Автоматический Подгон Слайдера

Отправлено Firefly на 18 Август 2016 - 15:09

Просмотр сообщенияsipsancho (18 Август 2016 - 12:10) писал:

И снова добрый день!
Возникла необходимость создать "всплывающее окно" либо при попадании клиента на сайт, либо в момент закрытия вкладки. Есть возможность осуществить подобное?

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
</head>

Вставьте перед ним код:
	 <script src="//yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script>
	 <script type="text/javascript">
	 $(function() {
		 // Проверяем запись в куках о посещении
		 // Если запись есть - ничего не делаем
		 if (!$.cookie('hideModal')) {
		 // если cookie не установлено появится окно
		 // с задержкой 5 секунд
		 var delay_popup = 5000;
		 setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
		 }
		 // Запоминаем в куках, что посетитель уже заходил
		 $.cookie('hideModal', true, {
		 // Время хранения cookie в днях
			 expires: 1,
			 path: '/'
		 });
	 });
	 </script>

Найдите код:
<body>

Вставьте после него код:
	 <!-- Модальное Окно -->
	 <div id="overlay">
		 <div class="popup">
			 <h2>Модальное Окно!</h2>
			 <p>
				 Текст
			 </p>
			 <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>
		 </div>
	 </div>

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, в конце добавьте код:
/* Всплывающее окно при загрузке сайта */
/* базовый контейнер, фон затемнения*/
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
z-index: 999;
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
overflow: auto;
}
/* модальный блок */
.popup {
top: 25%;
left: 0;
right: 0;	
font-size: 14px;
margin: auto;
width: 85%;
min-width: 320px;
max-width: 600px;
position: absolute;
padding: 15px 20px;
border: 1px solid #383838;
background: #fefefe;
z-index: 1000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
font: 14px/18px 'Tahoma', Arial, sans-serif;
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
}
/* заголовки в модальном блоке */
.popup h2, .popup h3 {
margin: 0 0 1rem 0;
font-weight: 300;
line-height: 1.3;
color: #009032;
text-shadow: 1px 2px 4px #ddd;
}
/* кнопка закрытия */
.close {
top: 10px;
right: 10px;
width: 32px;
height: 32px;
position: absolute;
border: none;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(0, 131, 119, 0.9);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
cursor: pointer;
outline: none;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
/* кнопка закрытия при наведении */
.close:hover {
background-color: rgba(252, 20, 0, 0.8);
}
/* изображения в модальном окне */
.popup img {
width: 100%;
height: auto;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* анимация при появлении блоков с содержанием */
@-moz-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}

Данное окно будет появляться для пользователя только один раз при посещении сайта (чтобы не мешать при переключении страниц и повторных заходах).
Значение в коде expires: 1 обозначает, что cookies файлы будут хранится 1 сутки, после чего окно снова начнет появляться.


#244412 Автоматический Подгон Слайдера

Отправлено Danil на 08 Август 2016 - 16:29

Просмотр сообщенияsipsancho (08 Август 2016 - 15:24) писал:

Добрый день!
Необходима Ваша помощь в решении проблемы со слайдером. Изначально слайдер был по ширине на всю страницу. Пытались с помощью сёрчинга по форуму в созданных темах подогнать его под требования наши. Хотим, чтоб он автоматически "подстраивался" по ширине под "товары на главной". И хотелось бы чтоб на мониторах с разным разрешением отображалось всё корректно. В связи с "сумбурностью" текстового изложения ТЗ, прикладываю скрин в аттаче! Спасибо!
Здравствуйте.
В стилях изменять ширину и высоту не нужно, поэтому необходимо вернуть стандартные значения:
в main.css найдите код
#slider {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 599px; overflow: hidden;z-index:1;}
.slides_container {cursor: none; position: position; left: 20%; top: 0px;  width: 1150px;height: 599px; overflow: hidden;}
и замените на
#slider {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 699px; overflow: hidden;z-index:1;}
.slides_container {cursor: move; position: absolute; left: 0px; top: 0px; width: 1920px;height: 699px; overflow: hidden;}
В jssor_slider.js найдите код
				  jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1920));
изменяйте значение 1920(ширина слайдера в px, высота подстраивается автоматически).