Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Изменение Слайдера На Главной

Автор Hiding, 10 мая 2015 05:33

Авторизуйтесь для ответа в теме

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

#1 Hiding

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

Пользователи
252 сообщений

Отправлено 10 Май 2015 - 05:33

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

Наверх

#2 RayLi

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

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

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

Hiding (10 Май 2015 - 05:33) писал:

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

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

Для того, чтобы ваш слайдер сделать кликабельным - для этого вам нужно сделать следующее:
В шаблоне html найти данный код:

			  <div class="row">
		  <div class="cols col-12">
			<div class="slider">
  <!-- Главная страница -->
			  {% IF index_page %}
				<div id="module_area">
				  <div id="flexslideshow" class="flexslider">
					<ul class="slides">
					  <li>					  
						<img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=chameleon" alt="Slide 1" class="slide_img">
					  </li>
					  <li>					  
						<img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=chameleon" alt="Slide 2" class="slide_img">
					  </li>
					  <li>					
						<img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=chameleon" alt="Slide 3" class="slide_img">
					  </li>
					</ul>
				  </div>
				</div>
			  {% ENDIF %}
		<!-- /Главная страница -->
			</div>
		  </div><!-- END cols col-12 -->
		</div>   <!-- END cols row -->

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

			  <div class="row">
		  <div class="cols col-12">
			<div class="slider">
  <!-- Главная страница -->
			  {% IF index_page %}
				<div id="module_area">
				  <div id="flexslideshow" class="flexslider">
					<ul class="slides">
					  <li>					  
						<a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=chameleon" alt="Slide 1" class="slide_img"></a>
					  </li>
					  <li>					  
						<a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=chameleon" alt="Slide 2" class="slide_img"></a>
					  </li>
					  <li>					
						<a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=chameleon" alt="Slide 3" class="slide_img"></a>
					  </li>
					</ul>
				  </div>
				</div>
			  {% ENDIF %}
		<!-- /Главная страница -->
			</div>
		  </div><!-- END cols col-12 -->
		</div>   <!-- END cols row -->

Где заместо строки ваша_ссылка - вы должны вставить нужную вам ссылку для конкретного слайдера.

Далее вам нужно в шаблон main.css добавить вот этот код:

.slider {
  width: 142.9%;
  margin-left: -285px;
}

Наверх

#3 Hiding

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

Пользователи
252 сообщений

Отправлено 11 Май 2015 - 03:41

Hiding (10 Май 2015 - 11:42) писал:

Спасибо, работает.
Но тока слайд за рамки сайта вылазит, как на картинке.
А с другой стороны картинка не полностью.

RayLi (10 Май 2015 - 11:48) писал:

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

.slider {
width: 142.9%;
margin-left: -285px;
}

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

.slider {
width: 142.8%;
margin-left: -285px;
}

Получилось при изменении текста на

.slider {
width: 117.5%;
margin-left: -100px;
}

Незнаю как будет на другом экране,но пока норм...
Спасибо большое...

А на счет всплывающего текста, как на шаблоне движение?

Наверх

#4 Hiding

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

Пользователи
252 сообщений

Отправлено 11 Май 2015 - 03:52

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

Наверх

#5 Firefly

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

Модераторы
3 810 сообщений

Отправлено 11 Май 2015 - 11:00

Hiding (11 Май 2015 - 03:52) писал:

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

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Скрипты -> main.js, найдите код:

/*запуск слайдера на главной*/
$(window).load(function() {
$('.flexslider').flexslider({
	 animation: "fade",
	 pauseOnHover: true,
	 touch: true,
	 animationSpeed: 1300,
	 slideshowSpeed: 6500,
smoothHeight: false,
controlNav: false,
	 directionNav: true
});
});
/*END запуск слайдера на главной*/

Изменяйте значение у slideshowSpeed: 6500.

Наверх

#6 Hiding

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

Пользователи
252 сообщений

Отправлено 11 Май 2015 - 11:49

Спасибо.
А на счет всплывающего текста так никто и не подскажет?

Наверх

#7 Ирина345

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

Модераторы
5 709 сообщений

Отправлено 11 Май 2015 - 13:46

Hiding (11 Май 2015 - 11:49) писал:

Спасибо.
А на счет всплывающего текста так никто и не подскажет?

Здравствуйте найдите в шаблоне hTML

  <li>				 
						<a href="http://atlet-fit.storeland.ru/catalog/Proteiny"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=chameleon" alt="Slide 1" class="slide_img"></a>
										  </li>
										  <li>									
												<a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=chameleon" alt="Slide 2" class="slide_img"></a>
										  </li>
										  <li>								  
												<a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=chameleon" alt="Slide 3" class="slide_img"></a>
					  </li>

замените на

<li>		 <div class="text">ваш текст</div>	 
						<a href="http://atlet-fit.storeland.ru/catalog/Proteiny"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=chameleon" alt="Slide 1" class="slide_img"></a>
										  </li>
										  <li>		   <div class="text">ваш текст</div>							   
												<a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=chameleon" alt="Slide 2" class="slide_img"></a>
										  </li>
										  <li>	   <div class="text">ваш текст</div>								 
												<a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=chameleon" alt="Slide 3" class="slide_img"></a>
					  </li>

в конец файла main.css добавьте

.text {
  position: absolute;
  font-size: 23px;
  color: white;
  top: 12px;
  left: 23px;
}

Наверх

#8 Hiding

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

Пользователи
252 сообщений

Отправлено 15 Май 2015 - 16:10

Доброго времени суток всем.
Текст появился. А как сделать чтоб он не постоянно был привязан к картинке слайда ,а чтоб после смены картинки текст выезжал со стороны? Как в шаблоне движение.

Спасибо.

Наверх

#9 Vaccina

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

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

Отправлено 16 Май 2015 - 05:28

.text {
  position: absolute;
  font-size: 23px;
  color: white;
  top: 12px;
  left: 23px;
}

замените на:

.text {
  position: absolute;
  font-size: 23px;
  color: white;
  top: 12px;
  right: 23px;
  -webkit-animation-name: 'movement';
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: easy-out;
	animation-name: 'movement';
	animation-duration: 4s;
	animation-timing-function: easy-out;
}
@keyframes 'movement' {
	from {
	top: 12px;
	left: 23px;
	-webkit-animation-timing-function: easy-in-out;
	}
	50% {
	top: 12px;
	left: 50%;
	}
	to {
	top: 12px;
	right: 23px;
	}  
}
@-webkit-keyframes 'movement' {
	from {
	top: 12px;
	left: 23px;
	-webkit-animation-timing-function: easy-in-out;
	}
	50% {
	top: 12px;
	left: 50%;
	}
	to {
	top: 12px;
	right: 23px;
	}  
}

Наверх

#10 Hiding

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

Пользователи
252 сообщений

Отправлено 16 Май 2015 - 09:58

Есть недочеты:
1.Чет он до середины выезжает а потом пауза и оказывается в крайней точке...
2.А куда ссылку вставить чтоб он стал кликабельным?
3.Я так понимаю в этом коде можно позицию менять?

Спасибо.

Наверх

#11 RayLi

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

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

Отправлено 17 Май 2015 - 08:51

Hiding (16 Май 2015 - 09:58) писал:

Есть недочеты:
1.Чет он до середины выезжает а потом пауза и оказывается в крайней точке...
2.А куда ссылку вставить чтоб он стал кликабельным?
3.Я так понимаю в этом коде можно позицию менять?

Спасибо.

Здравствуйте.
Чтобы сделать слайдер кликабельным - вам нужно сделать следующее:
В шаблоне html найдите данный код:

	 <div class="slider">
<!-- Главная страница -->
			 {% IF index_page %}
			 <div id="module_area">
				 <div id="flexslideshow" class="flexslider">
				 <ul class="slides">
					 <li>	
					 <div class="text">ваш текст</div>
					
					
					 <a href="http://atlet-fit.storeland.ru/catalog/Proteiny"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=chameleon" alt="Slide 1" class="slide_img"></a>
										 </li>
										 <li>								
											 <a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=chameleon" alt="Slide 2" class="slide_img"></a>
										 </li>
										 <li>								
											 <a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=chameleon" alt="Slide 3" class="slide_img"></a>
					 </li>
				 </ul>
				 </div>
			 </div>
			 {% ENDIF %}
	 <!-- /Главная страница -->
		 </div>
	
	 <div class="contwrap">
			 <div class="row">
		 <div class="cols col-12">
		
		 </div><!-- END cols col-12 -->
	 </div> <!-- END cols row -->

И замените строки ваша_ссылка на нужную ваш ссылку, чтобы из такого вида кода:

<a href="ваша_ссылка">

Получился вот этот:

<a href="http://atlet-fit.storeland.ru/catalog/Proteiny">

Наверх

#12 Hiding

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

Пользователи
252 сообщений

Отправлено 17 Май 2015 - 15:00

Да эт я понял. Слайдер то у меня кликабельный. Я просто не на все слайды настроил. Текст не кликабельный.

Наверх

#13 RayLi

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

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

Отправлено 17 Май 2015 - 15:25

Hiding (17 Май 2015 - 15:00) писал:

Да эт я понял. Слайдер то у меня кликабельный. Я просто не на все слайды настроил. Текст не кликабельный.

Здравствуйте.
На данный момент у вас сменен шаблон сайта.
Скажите - ваш вопрос больше не актуален, поскольку вы перешли на новый шаблон?
Уточните, пожалуйста.

Наверх

#14 Hiding

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

Пользователи
252 сообщений

Отправлено 17 Май 2015 - 15:33

Актуален. Просто смотрю. Щас верну все назад.

Наверх

#15 RayLi

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

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

Отправлено 17 Май 2015 - 15:56

Hiding (17 Май 2015 - 15:33) писал:

Актуален. Просто смотрю. Щас верну все назад.

В шаблоне html найдите следующий код:

<!-- Главная страница -->
			 {% IF index_page %}
			 <div id="module_area">
				 <div id="flexslideshow" class="flexslider">
				 <ul class="slides">
					 <li>	
					 <div class="text">ваш текст</div>
					
					
					 <a href="http://atlet-fit.storeland.ru/catalog/Proteiny"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=chameleon" alt="Slide 1" class="slide_img"></a>
										 </li>
										 <li>								
											 <a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=chameleon" alt="Slide 2" class="slide_img"></a>
										 </li>
										 <li>								
											 <a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=chameleon" alt="Slide 3" class="slide_img"></a>
					 </li>
				 </ul>
				 </div>
			 </div>
			 {% ENDIF %}
	 <!-- /Главная страница -->

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

<!-- Главная страница -->
			 {% IF index_page %}
			 <div id="module_area">
				 <div id="flexslideshow" class="flexslider">
				 <ul class="slides">
					 <li>	
					 <a href="ваша_ссылка"><div class="text">ваш текст</div></a>
					
					
					 <a href="http://atlet-fit.storeland.ru/catalog/Proteiny"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=chameleon" alt="Slide 1" class="slide_img"></a>
										 </li>
										 <li>								
											 <a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=chameleon" alt="Slide 2" class="slide_img"></a>
										 </li>
										 <li>								
											 <a href="ваша_ссылка"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=chameleon" alt="Slide 3" class="slide_img"></a>
					 </li>
				 </ul>
				 </div>
			 </div>
			 {% ENDIF %}
	 <!-- /Главная страница -->

Где заместо ваша_ссылка вы должны вставить нужную вам ссылку, как в случае со слайдером.