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


Вставить Слайдер

Автор Сергей Иванов, 28 окт. 2015 18:06

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

#1 Сергей Иванов

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

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

  • Пользователи
  • PipPipPipPip
  • 567 сообщений

Отправлено 28 Октябрь 2015 - 18:06

Подскажите как вставить в некоторые разделы вот такие слайдеры:
* указываю 2 варианта, а там как скажете
1)http://thecodeplayer...ized-thumbnails
2)http://pcvector.net/...-slaydshou.html (в приоритете)
Но во втором варианте используется JQ, как сильно будет подгружать страницу?

#2 Vaccina

Vaccina

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

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

Отправлено 29 Октябрь 2015 - 02:00

Любые дополнительные плагины нагружают сайт, но не настолько, чтобы было не комфортно работать, тем более это 1 слайдер, а не 10 друг под другом =)
Если брать второй как приоритетный, уточните пожалуйста, как вы хотите его использовать, в каких разделах он будет использоваться?
Из всей инструкции нет необходимости подключать:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

так как в стандартном шаблоне уже имеется данное подключение

#3 Сергей Иванов

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

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

  • Пользователи
  • PipPipPipPip
  • 567 сообщений

Отправлено 29 Октябрь 2015 - 06:35

Розы, хризантемы, гвоздики

#4 Vaccina

Vaccina

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

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

Отправлено 29 Октябрь 2015 - 07:14

Загрузите все файлы из папки images и js в раздел Сайт - Редактор шаблонов

В шаблоне HTML найдите:
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js?design=summer"></script>

после него пропишите:
<script language="javascript" type="text/javascript" src="{ASSETS_JS_PATH}jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="{ASSETS_JS_PATH}script.js"></script>

Далее найдите:
<!-- Скрипты для страницы товара -->
  {% IF MOD_LNAME = goods %}
  <script>
	// Запуск скриптов для страницы товара
	$(function(){ goodspage() });
	// Инициализируем табы на странице
	$(function() { initTabs() });
  </script>
  {% ENDIF %}
  <!-- Скрипты для главной -->
  {% IF index_page %}
  <!-- Слайдер -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}jssor_slider.js?design=summer"></script>
  <script>
	// Запуск скриптов для главной
	$(function(){indexPage()});
	// Запуск слайдера
	$(function(){slideShow()});
	// Запуск слайдера Новостей
	$(function(){slideNews()});
	// Анимация перед загружаемым объектом
	$(window).on('load', function () {
	  var $preloader = $('.preloader'),
		$spinner   = $preloader.find('.content-loading');
	  $spinner.fadeOut();
	  $preloader.delay(350).fadeOut('slow');
	});
  </script>
  {% ENDIF %}

замените на:
  {% IF MOD_LNAME = goods %}
  <script>
	// Запуск скриптов для страницы товара
	$(function(){ goodspage() });
	// Инициализируем табы на странице
	$(function() { initTabs() });
  </script>
  {% ELSEIF index_page %}
  <!-- Слайдер -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}jssor_slider.js?design=summer"></script>
  <script>
	// Запуск скриптов для главной
	$(function(){indexPage()});
	// Запуск слайдера
	$(function(){slideShow()});
	// Запуск слайдера Новостей
	$(function(){slideNews()});
	// Анимация перед загружаемым объектом
	$(window).on('load', function () {
	  var $preloader = $('.preloader'),
		$spinner   = $preloader.find('.content-loading');
	  $spinner.fadeOut();
	  $preloader.delay(350).fadeOut('slow');
	});
  </script>
  {% ELSEIF CATEGORY_NAME =  Розы || CATEGORY_NAME =  Хризантемы || CATEGORY_NAME =  Гвоздики %}
  <script type="text/javascript">
$(document).ready( function(){   
		// кнопки вперед и назад для слайдов
		var buttons = { previous:$('#jslidernews1 .button-previous') ,
						next:$('#jslidernews1 .button-next') };		   
		 $('#jslidernews1').lofJSidernews( { interval : 4000,
											direction		: 'opacitys',   
											easing			: 'easeInOutExpo',
											duration		: 1200,
											auto			 : true,
											maxItemDisplay  : 4,
											navPosition	 : 'horizontal', // horizontal
											navigatorHeight : 32,
											navigatorWidth  : 80,
											mainWidth		: 980,
											buttons			: buttons } );   
	});
</script>
  {% ENDIF %}

В main.css перед:
/******************************************************************************
  Адаптивная часть
*******************************************************************************/
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-sms-1, .col-sms-2, .col-sms-3, .col-sms-4, .col-sms-5, .col-sms-6, .col-sms-7, .col-sms-8, .col-sms-9, .col-sms-10, .col-sms-11, .col-sms-12 {float:left;position:relative;min-height:1px;padding-left:15px;padding-right:15px}
.col-xs-12{width:100%}
.col-xs-11{width:91.66666667%}
.col-xs-10{width:83.33333333%}

вставьте:
/* slider layout */
.lof-slidecontent { position:relative;	overflow:hidden;	border:#F4F4F4 solid 1px;}
.lof-slidecontent .preload{	height:100%;	width:100%;	position:absolute;	top:0;	left:0;	z-index:100000;	text-align:center;	background:#FFF}
.lof-slidecontent .preload div{	height:100%;	width:100%;	background:transparent url('{ASSETS_IMAGES_PATH}load-indicator.gif') no-repeat scroll 50% 50%;}
.lof-slidecontent  .sliders-wrapper{	position:relative;	height:100%;	width:900px;	z-index:3px;	overflow:hidden; }
.lof-slidecontent  ul.sliders-wrap-inner{overflow:hidden;	background:transparent url('{ASSETS_IMAGES_PATH}load-indicator.gif') no-repeat scroll 50% 50%;	padding:0px;	margin:0;	position:absolute;	overflow:hidden;}
.lof-slidecontent  ul.sliders-wrap-inner li{overflow:hidden;	padding:0px;margin:0px;	float:left;	position:relative;}
.lof-slidecontent  .lof-opacity  li{position:absolute;	top:0;	left:0;	float:inherit; }

.lof-slidecontent  .navigator-content {position:absolute; bottom:10px; right:10px;
	background:url('{ASSETS_IMAGES_PATH}transparent_bg.png') repeat;
	padding:5px 0px;
}
.lof-slidecontent  .navigator-wrapper{	position:relative;	z-index:10;
	height:180px;
	width:310px;
	overflow:hidden;
	color:#FFF;
	float:left
}
.lof-slidecontent  ul.navigator-wrap-inner{	top:0;	padding:0;	margin:0;	position:absolute;	width:100%; }
.lof-slidecontent  ul.navigator-wrap-inner li{ cursor:hand;	 cursor:pointer;	list-style:none;	padding:0;	margin-left:0px;	overflow:hidden;	float:left;	display:block;	text-align:center;}
/*******************************************************/

ul.sliders-wrap-inner li img{	padding:0px;	}
.lof-slidecontent .slider-description a.readmore{color:#58B1EA; font-size:95%; }
.lof-slidecontent .slider-description a{ color:#FFF; }
.lof-slidecontent .slider-description{
	z-index:100px;
	position:absolute;
	bottom:50px;
	left:0px;
	width:350px;
	background:url('{ASSETS_IMAGES_PATH}bg_trans.png');
	height:100px;
	padding:10px;
	color:#FFF;
}
.lof-slidecontent .slider-description h4 {	font-size: 14px;	margin: 10px 0;	padding: 0; }
.lof-slidecontent .slider-description .slider-meta a{   
	margin:0;
	background:#C01F25;
	font-size:75%;
	padding:2px 3px;
	font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
	text-transform:uppercase;
	text-decoration:none
}
.lof-slidecontent  .item-meta a:hover{	text-decoration:underline;}
.lof-slidecontent  .item-meta i {	font-size:70%; }
/* item navigator */
.lof-slidecontent ul.navigator-wrap-inner li img{
	border:#666 solid 3px;   
}
.lof-slidecontent ul.navigator-wrap-inner li.active img,
.lof-slidecontent ul.navigator-wrap-inner li:hover img {
	border:#A8A8A8 solid 3px;
	-moz-transition:border-color  ease-in-out 0.4s
}
.lof-slidecontent .navigator-content .button-next,
.lof-slidecontent .navigator-content .button-previous{
	display:block;
	width:22px;
	height:30px;
	color:#FFF;
	cursor:pointer;
}
.lof-slidecontent .navigator-content .button-next {
	float:left;   
	text-indent:-999px;
	margin-right:5px;
	background:url('{ASSETS_IMAGES_PATH}arrow-l.png') no-repeat right center;
}
.lof-slidecontent .navigator-content .button-previous {
	float:left;   
	text-indent:-999px;
	margin-left:5px;
	background:url('{ASSETS_IMAGES_PATH}arrow-r.png') no-repeat left center;
}
.lof-slidecontent .button-control {
   position:absolute;
   top:10px;
   right:10px;
	height: 20px;
	width: 20px;
	cursor:hand; cursor:pointer;
	background:url('{ASSETS_IMAGES_PATH}transparent_bg.png') repeat;
}
.lof-slidecontent .button-control span { display:block;  width:100%; height:100%;}
.lof-slidecontent .action-start span  {
	background:url('{ASSETS_IMAGES_PATH}play.png') no-repeat center center;
}
.lof-slidecontent .action-stop span {
	background:url('{ASSETS_IMAGES_PATH}pause.png') no-repeat center center;
}

В шаблоне Товары найдите:
<div class="{% IFNOT index_page %}col-md-9 col-xs-12 col-right{% ELSE %}col-xs-12{% ENDIF %}">

после него пропишите:
  {% IF CATEGORY_NAME =  Розы || CATEGORY_NAME =  Хризантемы || CATEGORY_NAME =  Гвоздики %}
  <div id="jslidernews1" class="lof-slidecontent" style="width:980px; height:340px;">
	<div class="preload"><div></div></div>
			 <!-- MAIN CONTENT -->
			  <div class="main-slider-content" style="width:980px; height:340px;">
				<ul class="sliders-wrap-inner">
					<li>
							<img src="images/thumbl_980x340.png" title="Новость 1" >		  
						  <div class="slider-description">
							<div class="slider-meta"><a target="_parent" title="Новость 1" href="#Category-1">/ Новость 1 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div>
							<h4>Новость 1</h4>
							<p>Один из лучших телефонов современности, хотите узнать больше...
							<a class="readmore" href="#">Подробнее</a>
							</p>
						 </div>
					</li>
				   <li>
					  <img src="images/thumbl_980x340_002.png" title="Новость 2" >		  
						 <div class="slider-description">
						   <div class="slider-meta"><a target="_parent" title="Новость 2" href="#Category-2">/ Новость 2 /</a>	 <i> — Четверг, Май 3, 2012 19:00</i></div>
							<h4>Новость 2</h4>
							<p>Отличнейший телефон с кучей нужных и не нужных функций...
							<a class="readmore" href="#">Подробнее</a>
							</p>
						 </div>
					</li>
				   <li>
					  <img src="images/thumbl_980x340_003.png" title="Новость 3" >		   
						<div class="slider-description">
						  <div class="slider-meta"><a target="_parent" title="Новость 3" href="#Category-3">/ Новость 3 /</a>	 <i> — Четверг, Май 3, 2012 19:00</i></div>
							<h4>Новость 3</h4>
							<p>Просто возьмите мобильный в руки и вы не захотите его отдавать...
							<a class="readmore" href="#">Подробнее</a>
							</p>
						 </div>
					</li>
					<li>
					  <img src="images/thumbl_980x340_004.png" title="Новость 4" >		   
						<div class="slider-description">
						  <div class="slider-meta"><a target="_parent" title="Новость 4" href="#Category-4">/ Новость 4 /</a>	<i> — Четверг, Май 3, 2012 19:00</i></div>
							<h4>Новость 4</h4>
							<p>Отличный девайс для интересного времяпрепровождения вне дома...
							<a class="readmore" href="#">Подробнее</a>
							</p>
						 </div>
					</li>
					<li>
					  <img src="images/thumbl_980x340_005.png" title="Новость 5" >		   
						<div class="slider-description">
						   <div class="slider-meta"><a target="_parent" title="Новость 5" href="#">/ Новость 5 /</a>	<i> — Четверг, Май 3, 2012 19:00</i></div>
						   <h4>Новость 5</h4>
							<p>Видели рекламу этого ноутбука по ТВ? Тогда обязательно посмотрите...
							<a class="readmore" href="#">Подробнее</a>
							</p>
						 </div>
					</li>
					<li>
		   
					  <img src="images/thumbl_980x340_006.png" title="Новость 6" >		   
						<div class="slider-description">
						  <div class="slider-meta"><a target="_parent" title="Новость 6" href="#">/ Новость 6 /</a>	<i> — Четверг, Май 3, 2012 19:00</i></div>
							<h4>Новость 6</h4>
							<p>"Моя прелесть!" Иначе и не скажешь. Копите деньги друзья...
							<a class="readmore" href="#">Подробнее</a>
							</p>
						 </div>
					</li>
					 <li>
					  <img src="images/thumbl_980x340_007.png" title="Новость 7" >		   
						<div class="slider-description">
						  <div class="slider-meta"><a target="_parent" title="Новость 7" href="#">/ Новость 7 /</a>	<i> — Четверг, Май 3, 2012 19:00</i></div>
							<h4>Новость 7</h4>
							<p>Отличный ноутбук, но можно найти такой же и без перламутровых пуговиц...
							<a class="readmore" href="#">Подробнее</a>
							</p>
						 </div>
					</li>
					  <li>
					  <img src="images/thumbl_980x340_008.png" title="Новость 8" >		   
						<div class="slider-description">
	   
						  <div class="slider-meta"><a target="_parent" title="Новость 8" href="#">/ Новость 8 /</a>	<i> — Четверг, Май 3, 2012 19:00</i></div>
							<h4>Новость 8</h4>
							<p>Ах планшет, планшет. А нужен ли ты вообще ?...
								<a class="readmore" href="#">Подробнее</a>
							</p>
						 </div>
					</li>
				  </ul>	 
			</div>
			<!-- END MAIN CONTENT -->
		   <!-- NAVIGATOR -->
			   <div class="navigator-content">
				  <div class="button-next">Вперед</div>
				  <div class="navigator-wrapper">
						<ul class="navigator-wrap-inner">
						   <li><img src="images/thumbs/thumbl_980x340.png" /></li>
						   <li><img src="images/thumbs/thumbl_980x340_002.png" /></li>
						   <li><img src="images/thumbs/thumbl_980x340_003.png" /></li>
						   <li><img src="images/thumbs/thumbl_980x340_004.png" /></li>   
						   <li><img src="images/thumbs/thumbl_980x340_005.png" /></li>
						   <li><img src="images/thumbs/thumbl_980x340_006.png" /></li>	  
						   <li><img src="images/thumbs/thumbl_980x340_007.png" /></li>	  
						   <li><img src="images/thumbs/thumbl_980x340_008.png" /></li>			  
						</ul>
				  </div>
				  <div  class="button-previous">Назад</div>
			 </div>
		  <!----------------- END OF NAVIGATOR --------------------->
		  <!-- BUTTON PLAY-STOP -->
		  <div class="button-control"><span></span></div>
		   <!-- END OF BUTTON PLAY-STOP -->
		 
</div>
  {% ENDIF %}

Обратно в Каталог товаров


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Лето
  5. → Каталог товаров
  6. Privacy Policy