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

[Сергей Иванов]

Подскажите как уменьшить слайдер?

[RayLi]

Сергей Иванов (18 Ноябрь 2015 - 16:46) писал:

Подскажите как уменьшить слайдер?

Здравствуйте.
Если я вас правильно понял, то сделайте, пожалуйста, следующее:
В шаблоне main.css найдите данный код:

#slider {
	position: relative;
	margin: 0 auto;
	top: 0px;
	left: 0px;
	width: 1920px;
	height: 699px;
	overflow: hidden;
	z-index: 1;
}

И замените его вот этим вот кодом:

#slider {
	position: relative;
	margin: 0 auto;
	top: 0px;
	left: 0px;
	width: 1220px !important;
	height: 699px;
	overflow: hidden;
	z-index: 1;
}

Теперь в шаблоне jssor_slider.js найдите следующий код:

  //responsive code begin
  //you can remove responsive code if you don't want the slider scales while window resizes
  function ScaleSlider() {
	  var bodyWidth = document.body.clientWidth;
	  if (bodyWidth)
		  jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1920));
	  else
		  window.setTimeout(ScaleSlider, 30);
  }

И замените его вот этим кодом:

  //responsive code begin
  //you can remove responsive code if you don't want the slider scales while window resizes
  function ScaleSlider() {
	  var bodyWidth = document.body.clientWidth;
	  if (bodyWidth)
		  jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1220));
	  else
		  window.setTimeout(ScaleSlider, 30);
  }

[Сергей Иванов]

Он наоборот больше стал

[RayLi]

Сергей Иванов (18 Ноябрь 2015 - 17:30) писал:

Он наоборот больше стал

Теперь сделайте, пожалуйста, следующее:
В шаблоне main.css найдите данный код:

#slider {
	position: relative;
	margin: 0 auto;
	top: 0px;
	left: 0px;
	width: 1220px !important;
	height: 699px;
	overflow: hidden;
	z-index: 1;
}

И замените его вот этим вот кодом:

#slider {
	position: relative;
	margin: 0 auto;
	top: 0px;
	left: 0px;
	width: 1220px !important;
	height: 445px !important;
	overflow: hidden;
	z-index: 1;
}

[Сергей Иванов]

Классно! Теперь поднять выше все что ниже

[RayLi]

Сергей Иванов (18 Ноябрь 2015 - 18:45) писал:

Классно! Теперь поднять выше все что ниже

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

[Сергей Иванов]

Так а  я все интсрукции и сделал

[RayLi]

Сергей Иванов (18 Ноябрь 2015 - 18:49) писал:

Так а  я все интсрукции и сделал

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

[Сергей Иванов]

Подскажите какой размер картинки мне сейчас можно вставлять?

[Vaccina]

У вас установлен максимальный размер слайдера 1220px по ширину, баннеры для него загружайте с тем же размером

[Сергей Иванов]

Очень нужно чтоб были такие не большие 2 баннера (левый слайдер), вместо того что сейчас на всю страницу. В мобильной версии их можно отключить!

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

• 

[Сергей Иванов]

Итак, не дождался вашей помощи, уменьшил сам не знаю насколько правильно! Но сам не пойму как вставить статичную картинку на это место? (рис. в приложении

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

• 

[Сергей Иванов]

Все работает не правильно! Помогите заменить слайдер на такой http://marktyrrell.com/labs/blueberry/ может получится сделать так как надо?!

[Vaccina]

В файле jssor_slider.js найдите:

function ScaleSlider() {
		  var bodyWidth = document.body.clientWidth;
		  if (bodyWidth)
				  jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1220));
		  else
				  window.setTimeout(ScaleSlider, 30);
  }

замените на:

function ScaleSlider() {
		  var bodyWidth = document.body.clientWidth;
		  if (bodyWidth)
				  jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 819));
		  else
				  window.setTimeout(ScaleSlider, 30);
  }

далее найдите:

$SlideWidth: 1220,								 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
	  $SlideHeight: 445,								//[Optional] Height of every slide in pixels, default value is height of 'slides' container
	 

замените на:

$SlideWidth: 819,								 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
	  $SlideHeight: 445,								//[Optional] Height of every slide in pixels, default value is height of 'slides' container
	 

В main.css найдите:

#slideshow {margin: 0;position: relative; top:50px;}
#slider {
		position: relative;
		margin: 0;
		top: 0px;
		left: 90px;
		width: 850px !important;
		height: 375px !important;
		overflow: hidden;
		z-index: 0;
}
.slides_container {cursor: move; position: absolute; left: 0px; top: 0px; width: 850px;height: 375px; overflow: hidden;}

замените на:

#slideshow {margin: 0 auto;position: relative;}
#slider {
		position: relative;
		margin: 0;
		width: 819px;
		height: 375px;
		overflow: hidden;
		z-index: 0;
}
.slides_container {cursor: move; position: absolute; left: 0px; top: 0px; width: 819px;height: 375px; overflow: hidden;}
.right_banner {
	float: right;
	width: 30%;
}
.right_banner img {
	width: 100%;
	height: auto;
}

В шаблоне HTML найдите:

</div>
	{% ENDIF %}
<!-- /END Jssor Slider Слайдер -->
	<!-- Товары на главной, Новинки, Хиты -->

перед ним вставьте:

<div class="right_banner">
  <a href="ссылка">
	<img src="{ASSETS_IMAGES_PATH}slide2.jpg" alt="" />
  </a>
</div>
<div class="clear"></div>

во вставляемом блоке slide2.jpg замените на имя файла вашего баннера

Должен справа от слайдера появиться баннер, но нужно увидеть конечный результат, чтобы стилями поправить их отображение

[Сергей Иванов]

Сделано, надо поправить)

[Vaccina]

В main.css найдите:

#slider {
	position: relative;
	margin: 0px;
	width: 819px;
	height: 375px;
	overflow: hidden;
	z-index: 0;
}

замените на:

#slider {
	position: relative;
	margin: 0px;
	width: 819px;
	height: 375px;
	overflow: hidden;
	z-index: 0;
	float: left;
}

далее найдите:

.slide_but {
		background: #ffad20;
		color: #fff;
		display: block;
		position: absolute;
		top: 70%;
		z-index: 99;
		text-align: center;
		left: 15%;
		width: 400px;
		font-size: 28px;
		font-weight: bold;
		padding: 20px;
}
.slide_but:hover {
		background-color: #fff;
}

замените на:

.slide_but {
		background: #ffad20;
		color: #fff;
		display: block;
		position: absolute !important;
		top: 70%;
		z-index: 99;
		text-align: center;
		left: 15%;
		width: 400px;
		font-size: 28px;
		font-weight: bold;
		padding: 20px;
}
.slide_but:hover {
		background-color: #fff;
}

[Сергей Иванов]

Ну почти) сделать отступ от шапки чуть чуть+ выровнить по шапке +какую то ошибку js упорно мне показывает)

[Vaccina]

В шаблоне main.css найдите:

#slideshow {
	margin: 0px auto;
	position: relative;
}

замените на:

#slideshow {
	margin: 10px auto 0px;
	position: relative;
}

далее найдите:

.right_banner {
	float: right;
	width: 30%;
}

замените на:

.right_banner {
	float: right;
	width: 28%;
}

В шаблоне HTML найдите:

<!-- Jssor Slider Слайдер -->
	{% IF index_page %}
	<div id="slideshow">

замените на:

<!-- Jssor Slider Слайдер -->
	{% IF index_page %}
	<div id="slideshow" class="container">

Лечение JS ошибки описала в другой теме =)

[Сергей Иванов]

Круто)