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



  • Авторизуйтесь для ответа в теме
Сообщений в теме: 62

#1 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 07 Апрель 2015 - 15:43

Устанавливаем слайдер для шаблона Цитрус.

1. Необходимо загрузить содержимое прикрепленного файла jssor_slider.zip, извлечь из архива файл jssor_slider.js и загрузить его на сайт через Редактор шаблонов - Добавить файл (зеленая кнопка).
2. В шаблоне main.js в самый конец добавляем код
// Слайдер на главной
function slideShow() {
  var _CaptionTransitions = [];
  _CaptionTransitions["L"] = { $Duration: 900, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
  _CaptionTransitions["R"] = { $Duration: 900, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
  _CaptionTransitions["T"] = { $Duration: 900, y: 0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
  _CaptionTransitions["B"] = { $Duration: 900, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
  _CaptionTransitions["ZMF|10"] = { $Duration: 900, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 };
  _CaptionTransitions["RTT|10"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} };
  _CaptionTransitions["RTT|2"] = { $Duration: 900, $Zoom: 3, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2, $Round: { $Rotate: 0.5} };
  _CaptionTransitions["RTTL|BR"] = { $Duration: 900, x: -0.6, y: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} };
  _CaptionTransitions["CLIP|LR"] = { $Duration: 900, $Clip: 15, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic }, $Opacity: 2 };
  _CaptionTransitions["MCLIP|L"] = { $Duration: 900, $Clip: 1, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };
  _CaptionTransitions["MCLIP|R"] = { $Duration: 900, $Clip: 2, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };

  var options = {
	  $FillMode: 2,									   //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
	  $AutoPlay: true,									//[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
	  $AutoPlayInterval: 4000,							//[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
	  $PauseOnHover: 1,								   //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
	  $ArrowKeyNavigation: true,						  //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
	  //$SlideEasing: $JssorEasing$.$EaseOutQuint,		//[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad
	  $SlideDuration: 800,								//[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
	  $MinDragOffsetToSlide: 20,						  //[Optional] Minimum drag offset to trigger slide , default value is 20
	  //$SlideWidth: 600,								 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
	  //$SlideHeight: 300,								//[Optional] Height of every slide in pixels, default value is height of 'slides' container
	  $SlideSpacing: 0,   										//[Optional] Space between each slide in pixels, default value is 0
	  $DisplayPieces: 1,								  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
	  $ParkingPosition: 0,								//[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
	  $UISearchMode: 1,								   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
	  $PlayOrientation: 1,								//[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
	  $DragOrientation: 1,								//[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
	  $CaptionSliderOptions: {							//[Optional] Options which specifies how to animate caption
		  $Class: $JssorCaptionSlider$,				   //[Required] Class to create instance to animate caption
		  $CaptionTransitions: _CaptionTransitions,	   //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
		  $PlayInMode: 1,								 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
		  $PlayOutMode: 3								 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
	  },
	  $BulletNavigatorOptions: {						  //[Optional] Options to specify and enable navigator or not
		  $Class: $JssorBulletNavigator$,				 //[Required] Class to create navigator instance
		  $ChanceToShow: 2,							   //[Required] 0 Never, 1 Mouse Over, 2 Always
		  $AutoCenter: 1,								 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
		  $Steps: 1,									  //[Optional] Steps to go for each navigation request, default value is 1
		  $Lanes: 1,									  //[Optional] Specify lanes to arrange items, default value is 1
		  $SpacingX: 8,								   //[Optional] Horizontal space between each item in pixel, default value is 0
		  $SpacingY: 8,								   //[Optional] Vertical space between each item in pixel, default value is 0
		  $Orientation: 1								 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
	  },
	  $ArrowNavigatorOptions: {						   //[Optional] Options to specify and enable arrow navigator or not
		  $Class: $JssorArrowNavigator$,				  //[Requried] Class to create arrow navigator instance
		  $ChanceToShow: 1,							   //[Required] 0 Never, 1 Mouse Over, 2 Always
		  $AutoCenter: 2,								 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
		  $Steps: 1									   //[Optional] Steps to go for each navigation request, default value is 1
	  }
  };

  var jssor_slider1 = new $JssorSlider$("slider", options);

  //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);
  }

  ScaleSlider();

  if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
	  $(window).bind('resize', ScaleSlider);
  }


  //if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
  //	$(window).bind("orientationchange", ScaleSlider);
  //}
  //responsive code end
}

3. В шаблоне HTML добавляем
Перед
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js?design=orange"></script>

Данную строку
<script type="text/javascript" src="{ASSETS_JS_PATH}jssor_slider.js?design=orange"></script>

Далее перед </head>
Добавляем
<!-- Запуск слайдера -->
	{% IF index_page %}
	<script>
	  $(function(){ slideShow()});
	</script>
	{% ENDIF %}

Затем находим в шаблоне HTML
<!-- Слайдер на главной -->
<!-- /END Слайдер на главной -->
Заменяем на
<!-- Слайдер на главной -->
		{% IF index_page %}
		<div id="slideshow" class="wrap">
		  <div id="slider">
			<!-- Slides Container -->
			<div u="slides" class="slides_container">
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
			  </div>
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
			  </div>
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
			  </div>
			</div>
		  </div>
		</div>
		{% ENDIF %}
		<!-- /END Слайдер на главной -->

Файлы slide1.png slide2.png slide3.png необходимо загрузить через Редактор шаблонов - Добавить файл. (В архиве есть несколько примеров слайдов).
Рекомендуемый размер слайдов 1920х570 пикселей.

4. В файле main.css добавляем в любое удобное место
#slideshow {margin: 0 0;position: relative;}
#slider {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 570px; overflow: hidden;z-index:1;}
.slides_container {cursor: move; position: absolute; left: 0px; top: 0px; width: 1920px;height: 570px; overflow: hidden;}
.slides_container img {left:0 !important;}

Прикрепленные файлы

  • Прикрепленный файл  jssor_slider.zip   1,55МБ   210 Количество загрузок:


#2 KlimOFF

KlimOFF

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 51 сообщений
  • ГородТверь

Отправлено 19 Апрель 2015 - 01:21

Кто-нибудь ставил этот слайдер по инструкции? Я попробовал - полная фигня получается...
слайдер.JPG
и с баннерами из комплекта и со своими... он мало того не работает, так и на экране хпч творится... :-(
Мож подскажет кто, как эту красоту вкрячить в нужное место и чтобы работала?
Пожелание по месту вкрячивания здесь: http://forum.storela...опилить-дизайн/


Наверное, у меня драйвер pryamye_ruki.sys не был установлен... :-) попробовал ещё раз - слайдер установился и запустился...

#3 KlimOFF

KlimOFF

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 51 сообщений
  • ГородТверь

Отправлено 19 Апрель 2015 - 18:41

Вроде как разобрался, чтобы слайдер на всех страницах был, но никак не могу его в нужное место пристроить, и почему-то обрезает его сверху...
Так, почему "обрезает сверху", вроде как понял:
менял: .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
на .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;margin-bottom: -20px;}
Вернул как было - и слайдер не обрезается!

Воткнуть его хочу сюда:
слайдер.JPG

размер слайдера 900х160

Помогите, плиз...
SL-328923

#4 KlimOFF

KlimOFF

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 51 сообщений
  • ГородТверь

Отправлено 20 Апрель 2015 - 10:22

Ауууу... Есть кто живой?

#5 RayLi

RayLi

    Активный участник

  • Модераторы
  • 2 864 сообщений

Отправлено 20 Апрель 2015 - 11:21

Просмотр сообщенияKlimOFF (19 Апрель 2015 - 18:41) писал:

Вроде как разобрался, чтобы слайдер на всех страницах был, но никак не могу его в нужное место пристроить, и почему-то обрезает его сверху...
Так, почему "обрезает сверху", вроде как понял:
менял: .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
на .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;margin-bottom: -20px;}
Вернул как было - и слайдер не обрезается!

Воткнуть его хочу сюда:
Прикрепленный файл слайдер.JPG

размер слайдера 900х160

Помогите, плиз...
SL-328923
Здравствуйте.
В шаблоне main.css найдите код:
#slideshow {
margin: 0 0;
position: relative;
}
И замените его вот этим кодом:
#slideshow {
margin: 0 0;
position: relative;
width: 47%;
margin-left: 29%;
margin-top: -7%;
}
Далее найдите этот код:
#header {
position: relative;
z-index: 2;
}
И замените его этим:
#header {
z-index: 1;
}


#6 KlimOFF

KlimOFF

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 51 сообщений
  • ГородТверь

Отправлено 20 Апрель 2015 - 16:33

Спасибо, слайдер поднялся куда надо!
Но его бы немного подровнять:
на главной
главная.JPG
1. Выровнять правый край по красной линии
2. Верх выровнять вровень с логотипом
3. Поднять всю нижнюю часть начиная с блока меню "товары на главной-хиты продаж-новинки" по линии
4. Желательно, чтобы отступ сверху (от верхнего меню до баннера) равнялся отступу от нижнего края баннера до блока меню  "товары на главной-хиты продаж-новинки"

каталог
каталог.JPG
1. Отступы баннера сверху, снизу и выравнивание по правому краю и по логотипу как на Главной.
2. Ширина блока с крошками - всё же хочется его уменьшить в 2 раза, но при использовании Ваших вчерашних рекомендаций:
менял: .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
на .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;margin-bottom: -20px;}
он уменьшается как надо, но при этом баннер обрезается сверху... :-( может, есть другой способ?

И ещё, касаемо самого слайдера:
1. Как сделать, чтобы при наведении на него курсора, курсор был не в виде крестика со стрелочками, а обычным указателем?
2. Как сделать стрелочки на слайдере для пролистывания?
3. Как его сделать кликабельным?
Может есть какой фак по настройке слайдера, его возможностям?

Заранее спасибо!

#7 RayLi

RayLi

    Активный участник

  • Модераторы
  • 2 864 сообщений

Отправлено 20 Апрель 2015 - 16:47

Просмотр сообщенияKlimOFF (20 Апрель 2015 - 16:33) писал:

Спасибо, слайдер поднялся куда надо!
Но его бы немного подровнять:
на главной
Прикрепленный файл главная.JPG
1. Выровнять правый край по красной линии
2. Верх выровнять вровень с логотипом
3. Поднять всю нижнюю часть начиная с блока меню "товары на главной-хиты продаж-новинки" по линии
4. Желательно, чтобы отступ сверху (от верхнего меню до баннера) равнялся отступу от нижнего края баннера до блока меню  "товары на главной-хиты продаж-новинки"

каталог
Прикрепленный файл каталог.JPG
1. Отступы баннера сверху, снизу и выравнивание по правому краю и по логотипу как на Главной.
2. Ширина блока с крошками - всё же хочется его уменьшить в 2 раза, но при использовании Ваших вчерашних рекомендаций:
менял: .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
на .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;margin-bottom: -20px;}
он уменьшается как надо, но при этом баннер обрезается сверху... :-( может, есть другой способ?

И ещё, касаемо самого слайдера:
1. Как сделать, чтобы при наведении на него курсора, курсор был не в виде крестика со стрелочками, а обычным указателем?
2. Как сделать стрелочки на слайдере для пролистывания?
3. Как его сделать кликабельным?
Может есть какой фак по настройке слайдера, его возможностям?

Заранее спасибо!
В шаблоне main.css найдите код:
#slideshow {
  margin: 0 0;
  position: relative;
  width: 47%;
  margin-left: 29%;
  margin-top: -7%;
}
И замените его вот этим кодом:
#slideshow {
  margin: 0 0;
  position: relative;
  width: 47%;
  margin-left: 26%;
  margin-top: -7.1%;
}
Далее найдите вот этот код:
#main {
  margin-top: 40px;
}
и замените его этим кодом:
#main {
  /* margin-top: 40px; */
}


#8 KlimOFF

KlimOFF

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 51 сообщений
  • ГородТверь

Отправлено 20 Апрель 2015 - 18:43

Главная почти идеально, но есть моменты:
главная.JPG
нужно увеличить размер лого как на картинке


А вот с каталогом хуже:
каталог.JPG
на картинке красным показаны необходимые изменения

И вот эти вопросы так и остались:
И ещё, касаемо самого слайдера:
1. Как сделать, чтобы при наведении на него курсора, курсор был не в виде крестика со стрелочками, а обычным указателем?
2. Как сделать стрелочки на слайдере для пролистывания?
3. Как его сделать кликабельным?
Может есть какой фак по настройке слайдера, его возможностям?

Помогите добить, плиз!

#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Апрель 2015 - 01:40

Лучше переделать немного шапку дабы не было проблем с адаптивностью.

В шаблоне HTML найдите:
<!-- Слайдер на главной -->

			 <div id="slideshow" class="wrap">
				 <div id="slider">
					 <!-- Slides Container -->
					 <div u="slides" class="slides_container">
						 <div>
							 <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
						 </div>
						 <div>
							 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
						 </div>
					 </div>
				 </div>
			 </div>
			
			 <!-- /END Слайдер на главной -->

замените на:
<!-- Слайдер на главной -->

			 <div id="slideshow" class="wrap col-lg-9 col-md-2 col-xs-12">
				 <div id="slider">
					 <!-- Slides Container -->
					 <div u="slides" class="slides_container">
						 <div>
							 <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
						 </div>
						 <div>
							 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
						 </div>
					 </div>
				 </div>
			 </div>
			
			 <!-- /END Слайдер на главной -->

и переместите его, поставив после:
<div class="logo col-lg-3 col-md-2 col-xs-12">
			 <a title="Триколор ТВ" href="http://tricolorsat.tv/catalog/Trikolor-TV">			
				 <img alt="{SETTINGS_STORE_NAME}" src="{ASSETS_IMAGES_PATH}trico_logo.png?design=orange">								
			 </a>
				
			 </div>

Далее в main.css найдите:
#slideshow {
margin: -9.1% 0 0 26.7%;
position: relative;
width: 47%;
}

замените на:
#slideshow {
position: relative;
}

отпишитесь пожалуйста о результате, возможно, немного подровнять слайдер придется.

На счет лого, в main.css после:
@media all and (min-width:1200px){

вставьте:
.logo.col-lg-3.col-md-2.col-xs-12 > a {
display: block;
margin: 0 auto;
width: 200px;
}
.logo.col-lg-3.col-md-2.col-xs-12 img {
margin: 0 auto;
width: 200px;
}

Опции для слайдера вы можете просмотреть в main.js в следующем коде:
var options = {
		  $FillMode: 2,																	//[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
		  $AutoPlay: true,																	  //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
		  $AutoPlayInterval: 4000,													  //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
		  $PauseOnHover: 0,																//[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
		  $ArrowKeyNavigation: true,											  //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
		  //$SlideEasing: $JssorEasing$.$EaseOutQuint,		  //[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad
		  $SlideDuration: 800,														  //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
		  $MinDragOffsetToSlide: 20,											  //[Optional] Minimum drag offset to trigger slide , default value is 20
		  //$SlideWidth: 900,															//[Optional] Width of every slide in pixels, default value is width of 'slides' container
		  //$SlideHeight: 160,														  //[Optional] Height of every slide in pixels, default value is height of 'slides' container
		  $SlideSpacing: 0,																			 //[Optional] Space between each slide in pixels, default value is 0
		  $DisplayPieces: 1,															  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
		  $ParkingPosition: 0,														  //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
		  $UISearchMode: 1,																//[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
		  $PlayOrientation: 1,														  //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
		  $DragOrientation: 0,														  //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
		  $CaptionSliderOptions: {													  //[Optional] Options which specifies how to animate caption
				  $Class: $JssorCaptionSlider$,							//[Required] Class to create instance to animate caption
				  $CaptionTransitions: _CaptionTransitions,		//[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
				  $PlayInMode: 1,																//[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
				  $PlayOutMode: 3																//[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
		  },
		  $BulletNavigatorOptions: {											  //[Optional] Options to specify and enable navigator or not
				  $Class: $JssorBulletNavigator$,								//[Required] Class to create navigator instance
				  $ChanceToShow: 2,														//[Required] 0 Never, 1 Mouse Over, 2 Always
				  $AutoCenter: 1,																//[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
				  $Steps: 1,																	  //[Optional] Steps to go for each navigation request, default value is 1
				  $Lanes: 1,																	  //[Optional] Specify lanes to arrange items, default value is 1
				  $SpacingX: 8,															//[Optional] Horizontal space between each item in pixel, default value is 0
				  $SpacingY: 8,															//[Optional] Vertical space between each item in pixel, default value is 0
				  $Orientation: 1																//[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
		  },
		  $ArrowNavigatorOptions: {												//[Optional] Options to specify and enable arrow navigator or not
				  $Class: $JssorArrowNavigator$,								  //[Requried] Class to create arrow navigator instance
				  $ChanceToShow: 1,														//[Required] 0 Never, 1 Mouse Over, 2 Always
				  $AutoCenter: 2,																//[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
				  $Steps: 1																		//[Optional] Steps to go for each navigation request, default value is 1
		  }
  };

документация: http://www.jssor.com...html#basicusage

#10 KlimOFF

KlimOFF

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 51 сообщений
  • ГородТверь

Отправлено 21 Апрель 2015 - 17:43

Просмотр сообщенияVaccina (21 Апрель 2015 - 01:40) писал:

Лучше переделать немного шапку дабы не было проблем с адаптивностью.

В шаблоне HTML найдите:
<!-- Слайдер на главной -->

			 <div id="slideshow" class="wrap">
				 <div id="slider">
					 <!-- Slides Container -->
					 <div u="slides" class="slides_container">
						 <div>
							 <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
						 </div>
						 <div>
							 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
						 </div>
					 </div>
				 </div>
			 </div>
			
			 <!-- /END Слайдер на главной -->

замените на:
<!-- Слайдер на главной -->

			 <div id="slideshow" class="wrap col-lg-9 col-md-2 col-xs-12">
				 <div id="slider">
					 <!-- Slides Container -->
					 <div u="slides" class="slides_container">
						 <div>
							 <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
						 </div>
						 <div>
							 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
						 </div>
					 </div>
				 </div>
			 </div>
			
			 <!-- /END Слайдер на главной -->

и переместите его, поставив после:
<div class="logo col-lg-3 col-md-2 col-xs-12">
			 <a title="Триколор ТВ" href="http://tricolorsat.tv/catalog/Trikolor-TV">			
				 <img alt="{SETTINGS_STORE_NAME}" src="{ASSETS_IMAGES_PATH}trico_logo.png?design=orange">								
			 </a>
				
			 </div>

Далее в main.css найдите:
#slideshow {
margin: -9.1% 0 0 26.7%;
position: relative;
width: 47%;
}

замените на:
#slideshow {
position: relative;
}

отпишитесь пожалуйста о результате, возможно, немного подровнять слайдер придется.

На счет лого, в main.css после:
@media all and (min-width:1200px){

вставьте:
.logo.col-lg-3.col-md-2.col-xs-12 > a {
display: block;
margin: 0 auto;
width: 200px;
}
.logo.col-lg-3.col-md-2.col-xs-12 img {
margin: 0 auto;
width: 200px;
}

Опции для слайдера вы можете просмотреть в main.js в следующем коде:
var options = {
		 $FillMode: 2,																 //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
		 $AutoPlay: true,																	 //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
		 $AutoPlayInterval: 4000,													 //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
		 $PauseOnHover: 0,															 //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
		 $ArrowKeyNavigation: true,											 //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
		 //$SlideEasing: $JssorEasing$.$EaseOutQuint,		 //[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad
		 $SlideDuration: 800,														 //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
		 $MinDragOffsetToSlide: 20,											 //[Optional] Minimum drag offset to trigger slide , default value is 20
		 //$SlideWidth: 900,														 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
		 //$SlideHeight: 160,														 //[Optional] Height of every slide in pixels, default value is height of 'slides' container
		 $SlideSpacing: 0,																			 //[Optional] Space between each slide in pixels, default value is 0
		 $DisplayPieces: 1,															 //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
		 $ParkingPosition: 0,														 //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
		 $UISearchMode: 1,															 //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
		 $PlayOrientation: 1,														 //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
		 $DragOrientation: 0,														 //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
		 $CaptionSliderOptions: {													 //[Optional] Options which specifies how to animate caption
				 $Class: $JssorCaptionSlider$,						 //[Required] Class to create instance to animate caption
				 $CaptionTransitions: _CaptionTransitions,	 //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
				 $PlayInMode: 1,															 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
				 $PlayOutMode: 3															 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
		 },
		 $BulletNavigatorOptions: {											 //[Optional] Options to specify and enable navigator or not
				 $Class: $JssorBulletNavigator$,							 //[Required] Class to create navigator instance
				 $ChanceToShow: 2,													 //[Required] 0 Never, 1 Mouse Over, 2 Always
				 $AutoCenter: 1,															 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
				 $Steps: 1,																	 //[Optional] Steps to go for each navigation request, default value is 1
				 $Lanes: 1,																	 //[Optional] Specify lanes to arrange items, default value is 1
				 $SpacingX: 8,														 //[Optional] Horizontal space between each item in pixel, default value is 0
				 $SpacingY: 8,														 //[Optional] Vertical space between each item in pixel, default value is 0
				 $Orientation: 1															 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
		 },
		 $ArrowNavigatorOptions: {											 //[Optional] Options to specify and enable arrow navigator or not
				 $Class: $JssorArrowNavigator$,								 //[Requried] Class to create arrow navigator instance
				 $ChanceToShow: 1,													 //[Required] 0 Never, 1 Mouse Over, 2 Always
				 $AutoCenter: 2,															 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
				 $Steps: 1																	 //[Optional] Steps to go for each navigation request, default value is 1
		 }
};

документация: http://www.jssor.com...html#basicusage

...и снова здравствуйте!
Вакцина, у меня к Вам ОГРОМНАЯ просьба - ну вникните пожалуйста в мои пожелания, ну что я бьюсь-то как рыба об лёд с этими правками... :blink: Прошу Вас, ну давайте ещё раз попробуем прям по пунктам:

1. Главная страница:
главная.JPG

1.1 Выровнять все элементы по ЧЁРНЫМ вертикальным линиям
1.2 Слайдер и лого выровнять по КРАСНЫМ горизонтальным линиям.
1.3 Высота слайдера=высоте логотипа=160
1.4 Между верхним меню и слайдером с лого должен быть небольшой промежуток, равный промежутку между лого со слайдером и меню "Товары на главной+хиты продаж+новинки"
1.5 Между лого и слайдером небольшой промежуток. Ширина слайдера=900, всё остальное место в пределах ЧЁРНЫХ линий - логотип.

2. Каталог:
каталог.JPG

2.1 Уменьшить блок с крошками в два раза
2.1 Разлепить его наконец уже с блоком каталога
2.3 Все остальные выравнивания лого со слайдером и промежутки как на главной

Очень надеюсь на Вашу помощь!
Спасибо!

#11 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 22 Апрель 2015 - 01:40

1. В main.css найдите:
#slider {
height: 160px;
left: 0;
margin: 0 auto;
overflow: hidden;
position: relative;
top: 0;
width: 900px;
z-index: 1;
}

замените на:
#slider {
height: 160px;
left: 0;
margin: 0 auto;
overflow: hidden;
position: relative;
top: 0;
width: 100% !important;
z-index: 1;
}
#slider > div {
width: 100% !important;
}

далее найдите:
.slides_container {
cursor: move;
height: 160px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 900px;
}
замените на:
.slides_container {
cursor: move;
height: 160px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.slides_container > div {
width: 100% !important;
}

далее найдите:
.slides_container img {
left: 0 !important;
}
замените на:
.slides_container img {
left: 0 !important;
width: 100% !important;
}

далее найдите:
.logo.col-lg-3.col-md-2.col-xs-12 img {
margin: 0 auto;
width: 200px;
}

замените на:
.logo.col-lg-3.col-md-2.col-xs-12 img {
height: 160px;
margin: 0 auto;
}


далее найдите:
#slideshow {
position: relative;
}

замените на:
#slideshow {
  padding: 20px 0 20px 10px;
  position: relative;
  width: 79%;
}

далее найдите:
.header-content .logo {
padding: 20px 0;
}
замените на:
.header-content .logo {
  min-width: 235px;
  padding: 20px 0;
  width: auto;
}


далее найдите:
.yt-tab-listing {
  overflow: hidden;
  padding: 10px;
}

замените на:
.yt-tab-listing {
  overflow: hidden;
  padding: 0 10px 10px 0;
}

должно получится следующее:
1.jpg

по поводу адаптивности в конец main.css пропишите:
@media all and (max-width: 1200px) {
.header-content .logo {
  padding: 20px 0;
  width: 21%;
}
.logo.col-lg-3.col-md-2.col-xs-12 img {
  width: 100%;
}
}


2.В main.css найдите:
#name-top h1 {
  color: #fff;
  display: block;
  font-size: 200%;
  font-weight: normal;
  line-height: 100%;
  padding: 25px 0 10px;
}
замените на:
#name-top h1 {
  color: #fff;
  display: block;
  font-size: 200%;
  font-weight: normal;
  line-height: 100%;
  padding: 10px 0;
}

далее найдите:
#pathway {
  padding: 19px 10px;
}

замените на:
#pathway {
  height: auto;
  padding: 10px;
}
#content > div#breadcrumbs {
  margin-bottom: 20px;
}


#12 KlimOFF

KlimOFF

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 51 сообщений
  • ГородТверь

Отправлено 22 Апрель 2015 - 12:00

Просмотр сообщенияVaccina (22 Апрель 2015 - 01:40) писал:

должно получится следующее:
Прикрепленный файл 1.jpg

Прочитал, увидел картинку, и подумал: Счастье есть!!!

Выполнил инструкции, и оказалось - показалось... :-(

Ничего общего...

Ну как так-то?! Почему у Вас всё как надо, а у меня нет?! У меня руки кривые? Пошёл об забор между штакетинами выпрямлять...

#13 KlimOFF

KlimOFF

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 51 сообщений
  • ГородТверь

Отправлено 23 Апрель 2015 - 00:20

Я так понимаю, что решения моей проблемы нет? Люди добрые, скажите, вот я человек, далёкий от вебмастеринга и кодинга, объясните, это реально так ОФИГЕННО сложно помочь мне внести необходимые изменения?! Это РЕАЛЬНО я многого хочу?! Или это ВООБЩЕ невыполнимо и я зря бьюсь над нерешаемой задачей? Или здесь таким образом так грамотно наклоняют на платный индивидуальный дизайн? Или что вообще?!

#14 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 23 Апрель 2015 - 00:51

К платному вас никто не склоняет. Попробуйте следующее, в main.css найдите:
.logo.col-lg-3.col-md-2.col-xs-12 > a {
display: block;
margin: 0 auto;
width: 200px;
}
замените на:
.logo.col-lg-3.col-md-2.col-xs-12 > a {
display: block;
margin: 0 auto;
}

После данного изменения логотип со слайдером должны встать корректно и ровно.

#15 KlimOFF

KlimOFF

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 51 сообщений
  • ГородТверь

Отправлено 23 Апрель 2015 - 23:00

УРРАА!!! Почти то, что доктор прописал!
Осталось уменьшить всё же в два раза высоту блока с крошками, и выровнять слайдер по правому краю по линии...
каталог.JPG

#16 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 24 Апрель 2015 - 01:24

В main.css найдите:
#pathway {
  padding: 19px 10px;
}
замените на:
#pathway {
  padding: 10px;
}


далее найдите:
#slideshow {
  padding: 20px 0 20px 10px;
  position: relative;
  width: 79%;
}
замените на:
#slideshow {
  float: right;
  padding: 20px 0 20px 10px;
  position: relative;
  width: 79%;
}
далее найдите:
#slider > div {
  width: 100% !important;
}

замените на:
#slider > div {
  transform: none !important;
  width: 100% !important;
}


#17 KlimOFF

KlimOFF

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 51 сообщений
  • ГородТверь

Отправлено 24 Апрель 2015 - 01:57

Слайдер теперь как надо, но блок так и не уменьшился... :-( он что, заколдованный?

#18 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 24 Апрель 2015 - 02:05

Проверьте блок:
#pathway {
padding: 19px 10px;
}

в данном виде у вас еще он присутствует, замените его, например, на:
#pathway {
padding: 5px 10px;
}


#19 KlimOFF

KlimOFF

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 51 сообщений
  • ГородТверь

Отправлено 24 Апрель 2015 - 02:16

да пофиг ему... у него походу оберег от нас...
Снимок.JPG

#20 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 24 Апрель 2015 - 02:25

Я скорее неправильно выразилась =)
Этот блок повторяется несколько раз и вы изменили только один из них,в main.css ниже вашего изменения имеется еще один спрятавшийся:
#pathway {
  padding: 19px 10px;
}






Темы с аналогичным тегами Слайдер для Цитруса, Цитрус слайдер, Слайдер, Адаптивный слайдер, Слайды, Шаб, лон цитрус слайды

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных