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

[winner00197]

Здравствуйте как менять фото на слайдере?

[Koderhan]

http://forum.storela...дер-на-главной/
Все очень просто если вы делали слайдер по этой инструкции.http://storeland.ru/about/faq#51
Вам нужно загрузить собственные фотогрфии в раздел Сайт -> Файлы. Желательно фотографии зарание подготовить, сделать одинакого размера и не большого объема.
Затем скопировать ссылки изображений и вставить в код слайдера в файле html.

[nasya727]

У меня слайдер, созданный не по той инструкции, а автоматический в теме "Осень". Вопрос остается тот же. Как поменять фото на слайдере? И еще, можно ли изменить размер слайдера, сделать его вертикальным ( под вертикальные картинки)?

[Сake]

Изображения в слайдере задаются в шаблоне "HTML", а именно в блоке кода

{% IF index_page %} 
	  <div class="flexslider" id="autumn-slider">
		<ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
		</ul>
	 </div>
	{% ENDIF %}

в данном примере за одно изображение отвечает строка

<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>

В данной строке вставлено изображение "slide2.jpg" которое должно быть загружено в разделе редактора тем. Добавляется изображение путем загрузки изображения в раздел редактора тем и вставки дополнительно строки в код слайдера. Пример

{% IF index_page %} 
	  <div class="flexslider" id="autumn-slider">
		<ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg"></a></li>
		</ul>
	 </div>
	{% ENDIF %}

Касаясь вопроса изменения размера слайдера - слайдер подстраивается под изображения вставленные в него. Если вы загрузите и вставите изображения 340x200px, то и слайдер примет такой же размер. Все добавляемые изображения в слайдер должны быть одинакового размера. Изменить направление слайдера так же можно, для этого в слайдере предусмотрена опция direction в двумя возможными значениями "horizontal" и "vertical". Каждое из значений задает направление слайдера. Если необходимо изменить направление для главного слайдера, то в файле main.js находим

//Слайдер на главной
$(window).load(function(){		
  $('.flexslider').flexslider({			
	animation: "slide",			
	start: function(slider){				
	  $('body').removeClass('loading');		  
	}		
  });	
});

и меняем на

//Слайдер на главной
$(window).load(function(){		
  $('.flexslider').flexslider({ 
	direction: "vertical",		   
	animation: "slide",			
	start: function(slider){				
	  $('body').removeClass('loading');		  
	}		
  });	
});

если же необходимо добавить дополнительный слайдер с таким направлением, то просто добавим код ниже существующего

//Слайдер на главной
$(window).load(function(){		
  $('.flexslider-2').flexslider({ 
	direction: "vertical",		   
	animation: "slide",			
	start: function(slider){				
	  $('body').removeClass('loading');		  
	}		
  });	
});

а уже в шаблоне зададим код слайдера так

<div class="flexslider-2" id="autumn-slider">
		<ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
		</ul>
	 </div>

[nasya727]

http://большие-медведи.рф/ получается следующее. что не так?

[miyako]

nasya727 (23 Октябрь 2013 - 12:45) писал:

http://большие-медведи.рф/ получается следующее. что не так?

Если Вы про уменьшение размеров слайдера, то найдите в style.css код -

.flexslider {
margin: 0 0 30px;
background: #fff;
border: 4px solid #fff;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
zoom: 1;
width: 80%;
margin: 0 auto;
}

и замените на  -

.flexslider {
margin: 0 0 30px;
background: #fff;
border: 4px solid #fff;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
zoom: 1;
width: 80%;
margin: 0 auto;
}

width: 80%; - ширина 80 процентов

[watches-club]

Cлайдер НЕ подстраивается под изображения вставленные в него

[ne_yana]

drop-shipper (23 Октябрь 2013 - 15:34) писал:

Cлайдер НЕ подстраивается под изображения вставленные в него

Здравствуйте, укажите, пожалуйста, номер Вашего аккаунта.

[watches-club]

http://watches-club.ru/
SL-203960

[ne_yana]

watches-club (23 Октябрь 2013 - 17:48) писал:

http://watches-club.ru/
SL-203960

Слайдер в этом шаблоне рассчитан на всю ширину страницы, поэтому картинка пропорционально растягивается. Поэтому если Вы хотите слайдер во всю ширину, то нужно загружать более узкие и вытянутые картинки, например, 1895х444 px.
Если же подойдет вариант не во всю ширину, то перенесите код

	{% IF index_page %} 
	  <div class="flexslider" id="autumn-slider">
		<ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
		</ul>
	 </div>
	{% ENDIF %}

вставив его после

	<div class="content container">

[watches-club]

Все равно слайдер не подстраивается под изображения вставленные в него

[Taisia]

вы выполнили эту часть инструкции

Цитата

Если же подойдет вариант не во всю ширину, то перенесите код

{% IF index_page %}
  <div class="flexslider" id="autumn-slider">
<ul class="slides">
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
</ul>
</div>
{% ENDIF %}вставив его после

<div class="content container">

соответственно у вас слайдер стал по ширине видимой части сайта.

сама же картинка у вас увеличилась пропорционально- сделайте ее еще уже (т.е. нужно обрезать верх и низ картинки оставив только середину)

или же вы хотите сделать слайдер еще уже ??

[watches-club]

Taisia (23 Октябрь 2013 - 20:14) писал:

вы выполнили эту часть инструкции





соответственно у вас слайдер стал по ширине видимой части сайта.

сама же картинка у вас увеличилась пропорционально- сделайте ее еще уже (т.е. нужно обрезать верх и низ картинки оставив только середину)

или же вы хотите сделать слайдер еще уже ??

Вы серьезно?

Зачем мне резать картинку если разрешение картинки менее чем разрешение слайдера!

[Taisia]

картинка увеличивается пропорционально
это означает что увеличивая ее по ширине вы соответственно увеличиваете ее по высоте
поэтому у вас слайдер сейчас такой широкий.

[watches-club]

Слайдер должен подстраиваться под любое разрешение монитора,или не так?

[Taisia]

сейчас ваша картинка такогоразмера
вы хотите что бы и слайдер был такого размера ? по высоте и ширине ?

[watches-club]

Я хочу чтобы мой слайдер подстраивался под любое разрешение монитора,и выглядел нормально в мобильных и планшетных браузерах,а не криво!

[Taisia]

слайдер и так у вас сейчас подстраивается.
смотрите скриншоты

Прикрепленные изображения

• 
• 
• 
• 

[watches-club]

у меня картинка 640х360 пикселей, а слайдер ее растягивает 1213х632, это нормально?

[watches-club]

будем ждать когда придет Vaccina и во всем разберется