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


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


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

#1 Hiding

Hiding

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

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

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

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

#2 RayLi

RayLi

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

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

Отправлено 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

Hiding

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

  • Пользователи
  • PipPipPipPip
  • 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

Hiding

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

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

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

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

#5 Firefly

Firefly

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

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

Отправлено 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

Hiding

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

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

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

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

#7 Ирина345

Ирина345

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

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

Отправлено 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

Hiding

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

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

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

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

Спасибо.

#9 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 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

Hiding

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

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

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

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

Спасибо.

#11 RayLi

RayLi

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

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

Отправлено 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

Hiding

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

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

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

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

#13 RayLi

RayLi

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

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

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

Просмотр сообщенияHiding (17 Май 2015 - 15:00) писал:

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

#14 Hiding

Hiding

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

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

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

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

#15 RayLi

RayLi

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

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

Отправлено 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 %}
	 <!-- /Главная страница -->

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

#16 Hiding

Hiding

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

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

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

Понял. Спасибо.
А то что текст до середины выезжает а потом пауза и оказывается в крайней точке как исправить.




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

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