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


ORNYSE

Регистрация: 30 окт. 2012
Offline Активность: 30 марта 2017 22:50
-----

#194268 Слайдер На Главной Странице

Отправлено Castiel на 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МБ   191 Количество загрузок:



#189647 Убрать Слайдер

Отправлено Vaccina на 04 Март 2015 - 05:11

Сайт - Редактор шаблонов - HTML - найдите и удалите следующий код:
<!-- Запуск слайдера -->
	{% IF index_page %}
	<script>
	   $(function(){ slideShow()});
	</script>
	{% ENDIF %}


<!-- Jssor Slider Слайдер Начало -->
		{% IF index_page %}
		<div id="slider1_container">
		  <!-- Slides Container -->
		  <div u="slides" class="slides_container">
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=jade" />
			</div>
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=jade" />
			</div>
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide3.jpg?design=jade" />
			</div>
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide4.jpg?design=jade" />
			</div>
			 <div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide5.jpg?design=jade" />
			</div>
		  </div>
		</div>
		{% ENDIF %}
		<!-- Jssor Slider Слайдер Конец -->



#68938 Помогите Прописать Базу Данных

Отправлено Сake на 23 Май 2013 - 02:25

Вам лучше подобные вопросы задавать на тематическом форуме. По по поводу вопроса - попробуйте использовать http://sypex.net/


#53339 Сделал Всплывающее Окно - Делюсь С Вами

Отправлено miyako на 20 Март 2013 - 14:29

Просмотр сообщенияORNYSE (20 Март 2013 - 14:07) писал:

Что конкретно вставить не понимаю. Вставляю все коды в страницу получается на странице с товаром набор символов от кода

В файл main.css нужно вставить код:
/*Всплывающее окно*/
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 500px; /*Ширина окна*/
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Закругленные углы--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#popup h1{
font:28px Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: red;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h2{
font:24px Monotype Corsiva, Arial;
color: #1985b4;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h3{
font:18px Monotype Corsiva, Arial;
color: #1985b4;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* кнопка закрытия */
.close {
background-color: rgba(0, 0, 0, 0.8) !important;
border: 2px solid #ccc;
height: 24px;
line-height: 24px !important;
position: absolute !important;
right: -24px;
cursor: pointer !important;
font-family: Times !important;
font-weight: bold !important;
text-align: center !important;
text-decoration: none !important;
color: rgba(255, 255, 255, 0.9) !important;
font-size: 14px !important;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9) !important;
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8) !important;
}

В страницу через редактор html кода вставьте код:
<div id="parent_popup">
<div id="popup">
<h1>Внимание, Братишки!</h1>
<h2>В среду 19 декабря в 16:00</h2>
<p>&nbsp;</p>
<h3>В рамках клуба коллекционеров-фалеристов</h3>
<h3>В ДК "Нагорный"</h3>
<h3>по адресу г.Москва м. Нагорная ул. Электролитный проезд дом 3</h3>
<h3>состоится</h3>
<p>&nbsp;</p>
<h2>Презентация-продажа атрибутики ВДВ и Спецназа интернет-магазина "Братишка"</h2>
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a></div>
</div>
<script type="text/javascript">// <![CDATA[
var delay_popup = 3000; /*время задержки примерно 3 секунды*/
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
// ]]></script>
Полная инструкция здесь - http://forum.storela...ами/#entry35322


#53020 Яндекс Игнорирует!

Отправлено Mrbessonov на 19 Март 2013 - 11:04

Просмотр сообщенияORNYSE (18 Март 2013 - 05:49) писал:

Подскажите почему яндекс не хочет индексировать сайт? Уже не один раз добавлял его на индексацию и ни какой реакции!

www.magorus.ru
И никакой реакции не жди от этого шизойдного поисковика -  яндекса. Мой сайт тоже в поиске всего 1 страница у него (прошло уже более 2 лет) :),хотя мой другой сайт,который закрыт от поисковых ботов,яндекс держит в поиске 114 страниц.(второй создан был менее месяца)
Вот сейчас сами думаете,в адекватности этого недопоисковика.


#36916 Ошибки Html И Css

Отправлено Vaccina на 31 Декабрь 2012 - 13:36

Данные ошибки не серьезные. Например ошибку HTML

Цитата

cannot generate system identifier for general entity "img"

Можно исправить если в шаблоне "HTML" найти что-то вроде

online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27

и заменить на

online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27

Ошибки в CSS связаны с использованием не валидных свойств. Данные свойства используются браузерами с префиксами. Например

-o-transition

данное свойство используется только в браузере Опера.

По сути на данные ошибки можно особого внимания не обращать.


#32504 Что С Кнопкой?

Отправлено support 2.0 на 22 Ноябрь 2012 - 16:43

Просмотр сообщенияORNYSE (22 Ноябрь 2012 - 16:18) писал:

Помогите исправить кнопку добавления в корзину товара, изменилась на всех товарах в магазине!
Как исправить подскажите , только конкретнее я профан в этих вопросах!
сайт: www.magorus.ru

Прикрепленный файл 23-11-2012 0-12-31.png

Панель управления -> Сайт -> Редактор тем -> файл main.css
Добавьте (141 строка) после
.whtgreen:active, .blgreen:active { background:url(/web/upload/assets/images/148/147290/whtgreen-bg.jpg) center bottom repeat; }
блок
.whtblue { border:1px solid #d0d0d0 !important; background:url({ASSETS_IMAGES_PATH}whtblue-nor.jpg) center top repeat-x; padding:5px 15px; font:normal 12px Verdana, Geneva, sans-serif; color:#504f4f; height:27px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; cursor:pointer; outline:none; }