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

[Mr.Nito]

evros (04 Март 2017 - 00:24) писал:

И еще вопрос ,как оптимизировать баннер под экран? Баннеры размером 1200 на 558

Здравствуйте.
Изменения произвёл.
Создал бэкап до 05.03.2017 09:43:10  и после  05.03.2017 10:04:34 .

[evros]

Mr.Nito (05 Март 2017 - 10:05) писал:

Здравствуйте.
Изменения произвёл.
Создал бэкап до 05.03.2017 09:43:10  и после  05.03.2017 10:04:34 .

Отлично! Благодарю Вас!

[Татьяна21]

Castiel (18 Октябрь 2016 - 16:32) писал:

Устанавливаем слайдер на главной, вместо статичной картинки. (Эффект приближения не сохраняется).

В шаблоне HTML
Находим

<div id="slideshow">
<div class="preloading"><div class="folding-cube"><div class="cube1 cube"></div><div class="cube2 cube"></div><div class="cube4 cube"></div><div class="cube3 cube"></div></div></div>
<div class="slide"></div>
<div class="text">
<div class="title">Новая коллекция</div>
<a href="{CATALOG_URL}" class="button big">Перейти в каталог</a>
</div>
<div class="image">
<img src="{ASSETS_IMAGES_PATH}slide.jpg?design=sunrise"/>
</div>
</div>

Заменяем на

<div id="slideshow">
<div class="preloading"><div class="folding-cube"><div class="cube1 cube"></div><div class="cube2 cube"></div><div class="cube4 cube"></div><div class="cube3 cube"></div></div></div>
<!-- Slides Container -->
<div class="slider">
<a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}slide.jpg?design=sunrise);"></a>
<a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}slide.jpg?design=sunrise);"></a>
<a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}slide.jpg?design=sunrise);"></a>
</div>
<div class="nav">
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
</div>

В main.css
Находим

#slideshow {position: relative;overflow: hidden;}
#slideshow .slide {width: 100%;height: 100%;opacity: 1;visibility: inherit;z-index: 20;background-image: url("{ASSETS_IMAGES_PATH}slide.jpg?design=sunrise");background-color: #fff;background-size: cover;background-position: center center;background-repeat: no-repeat;}
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;}
#slideshow .text .title {color: #8C2C29;margin-bottom: 15px;font-weight: 500;font-size: 36px;text-transform: uppercase;}
#slideshow .preloading {height: 150%;}
#slideshow .preloading .folding-cube {margin-top: -150px;}

Заменяем на

/*** Слайдер ***/
#slideshow {position: relative;width: 100%;cursor: hand;}
#slideshow .slider {width: 100%;}
#slideshow .slider a {display: none;height: 800px;background: url("{ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise") center center no-repeat;background-size: cover; }
#slideshow .slider a span {display: none;}
#slideshow .slider a:first-child {display: block;}
#slideshow .preloading {height: 150%;}
#slideshow .preloading .folding-cube {margin-top: -150px;}
#slideshow .owl-controls {display: none !important;}
#slideshow .nav {display: block;position: absolute;top: 50%;width: 100%;overflow: visible;z-index: 9;}
#slideshow .nav a {display: block;width: 30px;height: 55px;background: url("{ASSETS_IMAGES_PATH}arrow.png?design=sunrise") center center no-repeat;}
#slideshow .nav a.next {background-position: -76px -33px;float: right;margin-right: 15px;}
#slideshow .nav a.prev {background-position: -14px -33px;float: left;margin-left: 15px;}
#slideshow .preloading {height: 150%;}
#slideshow .preloading .folding-cube {margin-top: -150px;}

В main.js
Находим

// Функция расчета высоты и ширины экрана для картинки на главной
function slideshow() {
$(document).ready(function(){
var wh = $(window).height();
var ww = $(window).width();
var hh = $('#header').height();
$('#slideshow').css({'height': wh, 'width': ww});
});
// Эффект увеличения изображения
$(window).load(function(){
$('#slideshow .slide').animate({scale: '1.1'}, 15000);
});
}

Заменяем на

// Слайдер на главной
function slideshow() {
// Запуск слайдера
$(document).ready(function(){
var slider = $('#slideshow .slider');
slider.owlCarousel({
items: 1,
singleItem : true,
autoplay: false,
loop: true,
dots: false,
pagination: false,
navigation : false,
slideSpeed: 800,
stopOnHover: true,
touchDrag: true,
mouseDrag: true,
autoPlay: false
});
// Кнопки навигации
jQuery('#slideshow .nav .prev').on('click', function(e){
e.preventDefault();
slider.trigger('owl.prev');
});
jQuery('#slideshow .nav .next').on('click', function(e){
e.preventDefault();
slider.trigger('owl.next');
});
});
}

Здравствуйте! Мой
Аккаунт SL-430317

SL-430317

Я все сделала, как указано выше. В веб версии все работает хорошо, все получилось. А в мобильной версии банер получился большой. И нет автолистания. Как это исправить? И какой размер банеров должен быть в веб версии и мобильной? Помогите пожалуйста

[Mr.Nito]

Татьяна21 (12 Март 2018 - 13:55) писал:

Здравствуйте! Мой
Аккаунт SL-430317

SL-430317

Я все сделала, как указано выше. В веб версии все работает хорошо, все получилось. А в мобильной версии банер получился большой. И нет автолистания. Как это исправить? И какой размер банеров должен быть в веб версии и мобильной? Помогите пожалуйста

Здравствуйте.
Автопрокрутка уже установлена на 4 секунды в строке

		 autoPlay: 4000
});
// Кнопки навигации

В main.css добавил значения высоты

@media all and (max-width: 767px) {
#slideshow .slider a {height: 560px;}

@media all and (max-width: 481px) {
#slideshow .slider a {	height: 275px;} 

Можете заменить значения высоты на свои.

По умолчанию в шаблонах используются слайды размером 1920х570

[Татьяна21]

Mr.Nito (12 Март 2018 - 16:00) писал:

Здравствуйте.
Автопрокрутка уже установлена на 4 секунды в строке

		 autoPlay: 4000
});
// Кнопки навигации

В main.css добавил значения высоты

@media all and (max-width: 767px) {
#slideshow .slider a {height: 560px;}

@media all and (max-width: 481px) {
#slideshow .slider a { height: 275px;}

Можете заменить значения высоты на свои.

По умолчанию в шаблонах используются слайды размером 1920х570

Здравствуйте, Staff!
Большое спасибо, за вашу оперативность и помощь!

1. Значение 275 в мобильной версии, заменила на 175. А вот в веб версии мне не удается изменить высоту банера. Он такой огромный! Как сделать чтобы он был в высоту 400 или хотя бы 500?
2. И в мобильной версии не работает автолистание. А при нажатии на стрелочки в поисковой строке после имени домена появляется:  /#

[Mr.Nito]

Татьяна21 (12 Март 2018 - 23:18) писал:

Здравствуйте, Staff!
Большое спасибо, за вашу оперативность и помощь!

1. Значение 275 в мобильной версии, заменила на 175. А вот в веб версии мне не удается изменить высоту банера. Он такой огромный! Как сделать чтобы он был в высоту 400 или хотя бы 500?
2. И в мобильной версии не работает автолистание. А при нажатии на стрелочки в поисковой строке после имени домена появляется:  /#

1. Высота в веб версии высота 800px
строка

#slideshow .slider a {display: none;height: 800px;background: url("{ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise") center center no-repeat;background-size: cover; }

2. Поправил запуск слайдера на мобильной версии в main.js

  if(getClientWidth() < 750){
	$('#slideshow').css({'height': 'auto', 'width': 'auto'});
  }
  // Запуск функций при изменении экрана

Заменил на

  if(getClientWidth() < 750){
	slideshow()
	$('#slideshow').css({'height': 'auto', 'width': 'auto'});
  }
  // Запуск функций при изменении экрана

[Татьяна21]

Mr.Nito (13 Март 2018 - 10:50) писал:

1. Высота в веб версии высота 800px
строка

#slideshow .slider a {display: none;height: 800px;background: url("{ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise") center center no-repeat;background-size: cover; }

2. Поправил запуск слайдера на мобильной версии в main.js

if(getClientWidth() < 750){
$('#slideshow').css({'height': 'auto', 'width': 'auto'});
}
// Запуск функций при изменении экрана

Заменил на

if(getClientWidth() < 750){
slideshow()
$('#slideshow').css({'height': 'auto', 'width': 'auto'});
}
// Запуск функций при изменении экрана

Отлично! СПАСИБО!
Все работает!

[Boomashop]

ВОЗМОЖНО ЛИ ИСПРАВИТЬ?  

https://prnt.sc/j6x8t6

[Ирина345]

Boomashop (18 Апрель 2018 - 17:19) писал:

ВОЗМОЖНО ЛИ ИСПРАВИТЬ?  

https://prnt.sc/j6x8t6

Здравствуйте, стрелочки на слайдере выводятся через изображения, которое Вы можете изменить вручную.
Вы можете скачать и заменить данное изображение в разделе Сайт-Редактор шаблонов, среди изображений. Изображение имеет название arrow.png
Что бы добавить дополнительный блок навигации на слайдер, найдите в файле main.js код

slider.owlCarousel({
				 items: 1,
				 singleItem : true,
				 loop: true,
				 dots: false,
				 pagination: false,
				 navigation : false,
				 slideSpeed: 800,
				 stopOnHover: true,
				 touchDrag: true,
				 mouseDrag: true,
				 autoPlay: 3000
});

замените на

slider.owlCarousel({
				 items: 1,
				 singleItem : true,
				 loop: true,
				 dots: false,
				 pagination: true,
				 navigation : false,
				 slideSpeed: 800,
				 stopOnHover: true,
				 touchDrag: true,
				 mouseDrag: true,
				 autoPlay: 3000
});

далее найдите в файле main.css код

#slideshow .owl-controls {display: none !important;}

замените на

#slideshow .owl-controls {}
#slideshow .owl-page span {
	width: 20px;
	height: 20px;
	z-index: 9999;
	background-color: #0000007d;
	display: block;
	position: relative;
	float: left;
	margin: 5px;
	border-radius: 10px;
}
#slideshow .owl-controls .owl-pagination {
	position: absolute;
	z-index: 99999;
	bottom: 10px;
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
}

[Boomashop]

Благодарю

[Boomashop]

Помогите еще с вопросом. Спасибо !!1

Прикрепленные изображения

• 
• 

[Vaccina]

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

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите(данный блок встретится несколько раз,во всех случаях произвести изменения ниже):

<div class="callback-input">
				<input id="callback_phone" class="inputText callback_phone required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" placeholder="Номер телефона" maxlength="50" title="Введите номер телефона" autocomplete="off">
			  </div>

            
после него добавьте:

<div class="callback-input">
				<input id="callback_comment" class="inputText callback_comment" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_COMMENT}]" value="{FORM_CALLBACK_COMMENT}" placeholder="Описание" title="Введите описание" autocomplete="off">
			  </div>