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


Вопрос О Слайдерах


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

#1 Candyover

Candyover

    Продвинутый пользователь

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

Отправлено 15 Февраль 2014 - 16:37

Можно ли установить два одинаковых слайдера в двух разных местах на сайте?
У меня 2 разных слайдера, но нужно удалить нижний и поставить место него тот что стоит в верху

часть №1.png - слайдер который нужно продублировать
часть №2.png - слайдер который удалить

#2 @lina_va

@lina_va

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

  • Модератоpы
  • 498 сообщений

Отправлено 15 Февраль 2014 - 19:53

Просмотр сообщенияCandyover (15 Февраль 2014 - 16:37) писал:

Можно ли установить два одинаковых слайдера в двух разных местах на сайте?
У меня 2 разных слайдера, но нужно удалить нижний и поставить место него тот что стоит в верху

Прикрепленный файл часть №1.png - слайдер который нужно продублировать
Прикрепленный файл часть №2.png - слайдер который удалить
Чтобы удалить слайдер в html найдите и удалите код:
  <!-- Nyvo слайдер который отображается на главной -->
{% IF index_page %}
<!-- Обёртка, указывающая стиль темы -->
<div class="theme-default" style="padding: 1em; display: none;">
<!-- Непосредственный код слайдера -->
<div id="slider">
<img src="http://kelesia.storeland.net/_________________501bed21c66f5.jpg?1832" alt="" />
<a href="/"><img src="http://kelesia.storeland.net/2011-04%20(15)_Mario%20Muzi__1.jpg?1832" alt="" /></a>
<img title="Тут вставлю текст" src="http://kelesia.storeland.net/_________________501bed21c66f5.jpg?1832" alt="" />
<img src="http://kelesia.storeland.net/2011-04%20(15)_Mario%20Muzi__1.jpg?1832" alt="" />
<img src="http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg" alt="" />
</div>
</div>
<!-- Запуск слайдера -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show(); });
</script>
{% ENDIF %}
и
!-- Загрузка Jquery галереии Nyvo Slider -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}nyvo.css" type="text/css" media="screen" />
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.nivo.slider.pack.js"></script>


#3 Candyover

Candyover

    Продвинутый пользователь

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

Отправлено 16 Февраль 2014 - 01:28

Просмотр сообщения@lina_va (15 Февраль 2014 - 19:53) писал:

Чтобы удалить слайдер в html найдите и удалите код:
<!-- Nyvo слайдер который отображается на главной -->
{% IF index_page %}
<!-- Обёртка, указывающая стиль темы -->
<div class="theme-default" style="padding: 1em; display: none;">
<!-- Непосредственный код слайдера -->
<div id="slider">
<img src="http://kelesia.storeland.net/_________________501bed21c66f5.jpg?1832" alt="" />
<a href="/"><img src="http://kelesia.storeland.net/2011-04%20(15)_Mario%20Muzi__1.jpg?1832" alt="" /></a>
<img title="Тут вставлю текст" src="http://kelesia.storeland.net/_________________501bed21c66f5.jpg?1832" alt="" />
<img src="http://kelesia.storeland.net/2011-04%20(15)_Mario%20Muzi__1.jpg?1832" alt="" />
<img src="http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg" alt="" />
</div>
</div>
<!-- Запуск слайдера -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show(); });
</script>
{% ENDIF %}
и
!-- Загрузка Jquery галереии Nyvo Slider -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}nyvo.css" type="text/css" media="screen" />
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.nivo.slider.pack.js"></script>

Удалил, но теперь нужно добавить слайдер про который я писал в 1 посте

#4 Alexey11

Alexey11

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

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 16 Февраль 2014 - 07:32

Просмотр сообщенияCandyover (16 Февраль 2014 - 01:28) писал:

Удалил, но теперь нужно добавить слайдер про который я писал в 1 посте

В шаблоне HTML найдите данный блок кода:

<div id="slidebackgr">
<div id="slideshow">  
		<div id="slideshowWindow">	 
		<div class="slide">
		<a href="#">
		  <img src="http://st.magazin-soblazn.ru/2/993/541/k-logo-s.png" height="300" />
</a>
</div> 
<div class="slide">
		<a href="#">	  
		  <img src="http://st.magazin-soblazn.ru/2/993/540/EXAYF0OPXbo1.png" />
</a>
</div>										  
<div class="slide">
		<a href="#">	  
		  <img src="http://st.magazin-soblazn.ru/2/993/540/EXAYF0OPXbo1.png" />
</a>
</div>
</div>
</div>
</div>

Перенесите его на место сразу после данного блока кода:

		</table>
			  {% ENDIF %}	  
			  <!-- end Список товаров на главной -->
			{% ENDIF %}
			<!-- END Всевозможные списки товаров -->
		</td>
	  </tr>
	</table>


#5 Candyover

Candyover

    Продвинутый пользователь

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

Отправлено 16 Февраль 2014 - 12:43

Просмотр сообщенияAlexey11 (16 Февраль 2014 - 07:32) писал:

В шаблоне HTML найдите данный блок кода:

<div id="slidebackgr">
<div id="slideshow">
	 <div id="slideshowWindow">	
	 <div class="slide">
	 <a href="#">
		 <img src="http://st.magazin-soblazn.ru/2/993/541/k-logo-s.png" height="300" />
</a>
</div>
<div class="slide">
	 <a href="#">	
		 <img src="http://st.magazin-soblazn.ru/2/993/540/EXAYF0OPXbo1.png" />
</a>
</div>										
<div class="slide">
	 <a href="#">	
		 <img src="http://st.magazin-soblazn.ru/2/993/540/EXAYF0OPXbo1.png" />
</a>
</div>
</div>
</div>
</div>

Перенесите его на место сразу после данного блока кода:

	 </table>
			 {% ENDIF %}	
			 <!-- end Список товаров на главной -->
		 {% ENDIF %}
		 <!-- END Всевозможные списки товаров -->
	 </td>
	 </tr>
</table>

Cкопировал код и перенс, но слайдер не отображается  Безымянный.png

#6 Vaccina

Vaccina

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

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

Отправлено 18 Февраль 2014 - 04:05

давайте для начала код немного облегчим, найдите:
<style type="text/css">
#slidebackgr
{ 
width:610px;   <!---Это можно менять-->
height:345px;   <!---Это можно менять-->
margin-top:10px;   <!---Это можно менять-->
padding:0; 
position:relative;
background-image: url('http://kelesia.storeland.net/slide_bg1.png?4328'); <!---Это меняем-->
				}
   #slideshow
#slideshowWindow {
  width:576px;  <!---Это можно менять-->
height:320px;  <!---Это можно менять-->
padding:0;	 
position:relative;
   margin-left:17px;
   margin-right:17px;
margin-bottom:10px;  
overflow:hidden;
}
#slideshow h2
{
font-weight: normal;
color: #FFFFFF;
font-size: 2.1666em;
  line-height: 1.1538em;
  margin: 0.7692em 0 0.3846em 0
;
}
  #slideshow #slideshowWindow .slide
{
   padding:0;
				width:576px;
				height:300px;
   position:relative;
   margin-top:20px;
  overflow:hidden;
}
#slideshow #slideshowWindow .slide .slideText
{
				position:absolute;
				top:0px;
   left:0px;
   width:162px;
				height:300px; 
   background-repeat:repeat;
   margin:0;  
padding:0 10px 0 0;
   color:#ffffff;
   font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
#slideshow #slideshowWindow .slide .slideText a:link,
#slideshow #slideshowWindow .slide .slideText a:visited
{
				color:#ffffff;
				text-decoration:none;
}
.slideLink {color:#ffffff;
  text-decoration:underline;
}
#slideshow #slideshowWindow
.slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p
{ 
  margin:10px 0 0 10px;
				padding:0;
}
  /*Navigation*/ .nav {
   display:block; 
  text-indent:-10000px;
				position:absolute;
   cursor:pointer; } #leftNav {
  top:260px;	left:500px;  <!---Это можно менять-->
   width:94px;  height:36px; <!---Это можно менять-->
				background-image: url('http://kelesia.storeland.net/previous.png?4373'); <!---Это меняем-->
   background-repeat:no-repeat;
				z-index:999; }
#rightNav {  
top:260px;   <!---Это можно менять-->
  left:550px;<!---Это можно менять-->
				width:53px;
				height:36px;
				background-image: url('http://kelesia.storeland.net/next.png?4362'); <!---Это меняем-->
  background-repeat:no-repeat;
   z-index:999; }
  </style> 
<script type="text/javascript"> 
$(document).ready(function() {
  var currentPosition = 0;			 
var slideWidth = 576;		 
var slides = $('.slide');			 
var numberOfSlides = slides.length;		   
var slideShowInterval;		
var speed = 5000;	  <!---Кажется это скорость прокрутки. Это можно менять-->	   
//Assign a timer, so it will run periodically		 
slideShowInterval = setInterval(changePosition, speed);						
slides.wrapAll('<div id="slidesHolder"></div>')								
slides.css({ 'float' : 'left' });							  
//set #slidesHolder width equal to the total width of all the slides		  
$('#slidesHolder').css('width', slideWidth * numberOfSlides);						 
$('#slideshow')					   
.prepend('<span class="nav" id="leftNav">Move Left</span>')				   
.append('<span class="nav" id="rightNav">Move Right</span>');						  
manageNav(currentPosition);						   
//tell the buttons what to do when clicked			
$('.nav').bind('click', function() {										  
//determine new position					  
currentPosition = ($(this).attr('id')=='rightNav')					 
? currentPosition+1 : currentPosition-1;																									  
//hide/show controls				  
manageNav(currentPosition);					
clearInterval(slideShowInterval);					 
slideShowInterval = setInterval(changePosition, speed);						
moveSlide();		   
});						   
function manageNav(position) {				 
//hide left arrow if position is first slide				  
if(position==0){ $('#leftNav').hide() }					   
else { $('#leftNav').show() }				 
//hide right arrow is slide position is last slide					
if(position==numberOfSlides-1){ $('#rightNav').hide() }					   
else { $('#rightNav').show() }				 }							  
  //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked		  
  function changePosition() {				  
  if(currentPosition == numberOfSlides - 1) {						  
currentPosition = 0;						  
manageNav(currentPosition);				   
} else {							   
currentPosition++;							 
manageNav(currentPosition);				   
}					  moveSlide();		   
}											 
//moveSlide: this function moves the slide			 
function moveSlide()
{						
$('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});		   
}	   }); </script> 
  <div id="slidebackgr">
<div id="slideshow">  
		<div id="slideshowWindow">	 
		<div class="slide">
		<a href="#">
		  <img src="http://st.magazin-soblazn.ru/2/993/541/k-logo-s.png" height="300" />
</a>
</div> 
<div class="slide">
		<a href="#">	  
		  <img src="http://st.magazin-soblazn.ru/2/994/668/Bezymyannyj.png" />
</a>
</div>										  
<div class="slide">
		<a href="#">	  
		  <img src="http://st.magazin-soblazn.ru/1/994/437/EXAYF0OPXbo.png" />
</a>
</div>
</div>
</div>
</div>
замените на:
<div id="slidebackgr">
<div id="slideshow">  
  <div id="slideshowWindow">	 
   <div class="slide">
	<a href="#">
	 <img src="http://st.magazin-soblazn.ru/2/993/541/k-logo-s.png" height="300" />
	</a>
   </div> 
   <div class="slide">
	<a href="#">	  
	 <img src="http://st.magazin-soblazn.ru/2/994/668/Bezymyannyj.png" />
	</a>
   </div>										  
   <div class="slide">
	<a href="#">	  
	 <img src="http://st.magazin-soblazn.ru/1/994/437/EXAYF0OPXbo.png" />
	</a>
   </div>
  </div>
</div>
</div>

далее в main.css в самый конец добавьте:
#slidebackgr
{ 
width:610px;   <!---Это можно менять-->
height:345px;   <!---Это можно менять-->
margin-top:10px;   <!---Это можно менять-->
padding:0; 
position:relative;
background-image: url('http://kelesia.storeland.net/slide_bg1.png?4328'); <!---Это меняем-->
				}
   #slideshow
#slideshowWindow {
  width:576px;  <!---Это можно менять-->
height:320px;  <!---Это можно менять-->
padding:0;	 
position:relative;
   margin-left:17px;
   margin-right:17px;
margin-bottom:10px;  
overflow:hidden;
}
#slideshow h2
{
font-weight: normal;
color: #FFFFFF;
font-size: 2.1666em;
  line-height: 1.1538em;
  margin: 0.7692em 0 0.3846em 0
;
}
  #slideshow #slideshowWindow .slide
{
   padding:0;
				width:576px;
				height:300px;
   position:relative;
   margin-top:20px;
  overflow:hidden;
}
#slideshow #slideshowWindow .slide .slideText
{
				position:absolute;
				top:0px;
   left:0px;
   width:162px;
				height:300px; 
   background-repeat:repeat;
   margin:0;  
padding:0 10px 0 0;
   color:#ffffff;
   font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
#slideshow #slideshowWindow .slide .slideText a:link,
#slideshow #slideshowWindow .slide .slideText a:visited
{
				color:#ffffff;
				text-decoration:none;
}
.slideLink {color:#ffffff;
  text-decoration:underline;
}
#slideshow #slideshowWindow
.slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p
{ 
  margin:10px 0 0 10px;
				padding:0;
}
  /*Navigation*/ .nav {
   display:block; 
  text-indent:-10000px;
				position:absolute;
   cursor:pointer; } #leftNav {
  top:260px;	left:500px;  <!---Это можно менять-->
   width:94px;  height:36px; <!---Это можно менять-->
				background-image: url('http://kelesia.storeland.net/previous.png?4373'); <!---Это меняем-->
   background-repeat:no-repeat;
				z-index:999; }
#rightNav {  
top:260px;   <!---Это можно менять-->
  left:550px;<!---Это можно менять-->
				width:53px;
				height:36px;
				background-image: url('http://kelesia.storeland.net/next.png?4362'); <!---Это меняем-->
  background-repeat:no-repeat;
   z-index:999; }

Далее в main.js в самый конец-то добавьте:
$(document).ready(function() {
  var currentPosition = 0;			 
var slideWidth = 576;		 
var slides = $('.slide');			 
var numberOfSlides = slides.length;		   
var slideShowInterval;		
var speed = 5000;	  <!---Кажется это скорость прокрутки. Это можно менять-->	   
//Assign a timer, so it will run periodically		 
slideShowInterval = setInterval(changePosition, speed);						
slides.wrapAll('<div id="slidesHolder"></div>')								
slides.css({ 'float' : 'left' });							  
//set #slidesHolder width equal to the total width of all the slides		  
$('#slidesHolder').css('width', slideWidth * numberOfSlides);						 
$('#slideshow')					   
.prepend('<span class="nav" id="leftNav">Move Left</span>')				   
.append('<span class="nav" id="rightNav">Move Right</span>');						  
manageNav(currentPosition);						   
//tell the buttons what to do when clicked			
$('.nav').bind('click', function() {										  
//determine new position					  
currentPosition = ($(this).attr('id')=='rightNav')					 
? currentPosition+1 : currentPosition-1;																									  
//hide/show controls				  
manageNav(currentPosition);					
clearInterval(slideShowInterval);					 
slideShowInterval = setInterval(changePosition, speed);						
moveSlide();		   
});						   
function manageNav(position) {				 
//hide left arrow if position is first slide				  
if(position==0){ $('#leftNav').hide() }					   
else { $('#leftNav').show() }				 
//hide right arrow is slide position is last slide					
if(position==numberOfSlides-1){ $('#rightNav').hide() }					   
else { $('#rightNav').show() }				 }							  
  //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked		  
  function changePosition() {				  
  if(currentPosition == numberOfSlides - 1) {						  
currentPosition = 0;						  
manageNav(currentPosition);				   
} else {							   
currentPosition++;							 
manageNav(currentPosition);				   
}					  moveSlide();		   
}											 
//moveSlide: this function moves the slide			 
function moveSlide()
{						
$('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});		   
}	   });


#7 Candyover

Candyover

    Продвинутый пользователь

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

Отправлено 18 Февраль 2014 - 16:01

Просмотр сообщенияVaccina (18 Февраль 2014 - 04:05) писал:

давайте для начала код немного облегчим, найдите:
<style type="text/css">
#slidebackgr
{
width:610px; <!---Это можно менять-->
height:345px; <!---Это можно менять-->
margin-top:10px; <!---Это можно менять-->
padding:0;
position:relative;
background-image: url('http://kelesia.storeland.net/slide_bg1.png?4328'); <!---Это меняем-->
			 }
#slideshow
#slideshowWindow {
width:576px; <!---Это можно менять-->
height:320px; <!---Это можно менять-->
padding:0;	
position:relative;
margin-left:17px;
margin-right:17px;
margin-bottom:10px;
overflow:hidden;
}
#slideshow h2
{
font-weight: normal;
color: #FFFFFF;
font-size: 2.1666em;
line-height: 1.1538em;
margin: 0.7692em 0 0.3846em 0
;
}
#slideshow #slideshowWindow .slide
{
padding:0;
			 width:576px;
			 height:300px;
position:relative;
margin-top:20px;
overflow:hidden;
}
#slideshow #slideshowWindow .slide .slideText
{
			 position:absolute;
			 top:0px;
left:0px;
width:162px;
			 height:300px;
background-repeat:repeat;
margin:0;
padding:0 10px 0 0;
color:#ffffff;
font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
#slideshow #slideshowWindow .slide .slideText a:link,
#slideshow #slideshowWindow .slide .slideText a:visited
{
			 color:#ffffff;
			 text-decoration:none;
}
.slideLink {color:#ffffff;
text-decoration:underline;
}
#slideshow #slideshowWindow
.slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p
{
margin:10px 0 0 10px;
			 padding:0;
}
/*Navigation*/ .nav {
display:block;
text-indent:-10000px;
			 position:absolute;
cursor:pointer; } #leftNav {
top:260px; left:500px; <!---Это можно менять-->
width:94px; height:36px; <!---Это можно менять-->
			 background-image: url('http://kelesia.storeland.net/previous.png?4373'); <!---Это меняем-->
background-repeat:no-repeat;
			 z-index:999; }
#rightNav {
top:260px; <!---Это можно менять-->
left:550px;<!---Это можно менять-->
			 width:53px;
			 height:36px;
			 background-image: url('http://kelesia.storeland.net/next.png?4362'); <!---Это меняем-->
background-repeat:no-repeat;
z-index:999; }
</style>
<script type="text/javascript">
$(document).ready(function() {
var currentPosition = 0;			
var slideWidth = 576;		
var slides = $('.slide');			
var numberOfSlides = slides.length;		
var slideShowInterval;		
var speed = 5000;	 <!---Кажется это скорость прокрутки. Это можно менять-->	
//Assign a timer, so it will run periodically		
slideShowInterval = setInterval(changePosition, speed);						
slides.wrapAll('<div id="slidesHolder"></div>')								
slides.css({ 'float' : 'left' });							
//set #slidesHolder width equal to the total width of all the slides		
$('#slidesHolder').css('width', slideWidth * numberOfSlides);						
$('#slideshow')					
.prepend('<span class="nav" id="leftNav">Move Left</span>')				
.append('<span class="nav" id="rightNav">Move Right</span>');						
manageNav(currentPosition);						
//tell the buttons what to do when clicked			
$('.nav').bind('click', function() {										
//determine new position					
currentPosition = ($(this).attr('id')=='rightNav')					
? currentPosition+1 : currentPosition-1;																									
//hide/show controls				
manageNav(currentPosition);					
clearInterval(slideShowInterval);					
slideShowInterval = setInterval(changePosition, speed);						
moveSlide();		
});						
function manageNav(position) {				
//hide left arrow if position is first slide				
if(position==0){ $('#leftNav').hide() }					
else { $('#leftNav').show() }				
//hide right arrow is slide position is last slide					
if(position==numberOfSlides-1){ $('#rightNav').hide() }					
else { $('#rightNav').show() }				 }							
//changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked		
function changePosition() {				
if(currentPosition == numberOfSlides - 1) {						
currentPosition = 0;						
manageNav(currentPosition);				
} else {							
currentPosition++;							
manageNav(currentPosition);				
}					 moveSlide();		
}											
//moveSlide: this function moves the slide			
function moveSlide()
{						
$('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});		
}	 }); </script>
<div id="slidebackgr">
<div id="slideshow">
	 <div id="slideshowWindow">	
	 <div class="slide">
	 <a href="#">
		 <img src="http://st.magazin-soblazn.ru/2/993/541/k-logo-s.png" height="300" />
</a>
</div>
<div class="slide">
	 <a href="#">	
		 <img src="http://st.magazin-soblazn.ru/2/994/668/Bezymyannyj.png" />
</a>
</div>										
<div class="slide">
	 <a href="#">	
		 <img src="http://st.magazin-soblazn.ru/1/994/437/EXAYF0OPXbo.png" />
</a>
</div>
</div>
</div>
</div>
замените на:
<div id="slidebackgr">
<div id="slideshow">
<div id="slideshowWindow">	
<div class="slide">
<a href="#">
	 <img src="http://st.magazin-soblazn.ru/2/993/541/k-logo-s.png" height="300" />
</a>
</div>
<div class="slide">
<a href="#">	
	 <img src="http://st.magazin-soblazn.ru/2/994/668/Bezymyannyj.png" />
</a>
</div>										
<div class="slide">
<a href="#">	
	 <img src="http://st.magazin-soblazn.ru/1/994/437/EXAYF0OPXbo.png" />
</a>
</div>
</div>
</div>
</div>

далее в main.css в самый конец добавьте:
#slidebackgr
{
width:610px; <!---Это можно менять-->
height:345px; <!---Это можно менять-->
margin-top:10px; <!---Это можно менять-->
padding:0;
position:relative;
background-image: url('http://kelesia.storeland.net/slide_bg1.png?4328'); <!---Это меняем-->
			 }
#slideshow
#slideshowWindow {
width:576px; <!---Это можно менять-->
height:320px; <!---Это можно менять-->
padding:0;	
position:relative;
margin-left:17px;
margin-right:17px;
margin-bottom:10px;
overflow:hidden;
}
#slideshow h2
{
font-weight: normal;
color: #FFFFFF;
font-size: 2.1666em;
line-height: 1.1538em;
margin: 0.7692em 0 0.3846em 0
;
}
#slideshow #slideshowWindow .slide
{
padding:0;
			 width:576px;
			 height:300px;
position:relative;
margin-top:20px;
overflow:hidden;
}
#slideshow #slideshowWindow .slide .slideText
{
			 position:absolute;
			 top:0px;
left:0px;
width:162px;
			 height:300px;
background-repeat:repeat;
margin:0;
padding:0 10px 0 0;
color:#ffffff;
font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
#slideshow #slideshowWindow .slide .slideText a:link,
#slideshow #slideshowWindow .slide .slideText a:visited
{
			 color:#ffffff;
			 text-decoration:none;
}
.slideLink {color:#ffffff;
text-decoration:underline;
}
#slideshow #slideshowWindow
.slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p
{
margin:10px 0 0 10px;
			 padding:0;
}
/*Navigation*/ .nav {
display:block;
text-indent:-10000px;
			 position:absolute;
cursor:pointer; } #leftNav {
top:260px; left:500px; <!---Это можно менять-->
width:94px; height:36px; <!---Это можно менять-->
			 background-image: url('http://kelesia.storeland.net/previous.png?4373'); <!---Это меняем-->
background-repeat:no-repeat;
			 z-index:999; }
#rightNav {
top:260px; <!---Это можно менять-->
left:550px;<!---Это можно менять-->
			 width:53px;
			 height:36px;
			 background-image: url('http://kelesia.storeland.net/next.png?4362'); <!---Это меняем-->
background-repeat:no-repeat;
z-index:999; }

Далее в main.js в самый конец-то добавьте:
$(document).ready(function() {
var currentPosition = 0;			
var slideWidth = 576;		
var slides = $('.slide');			
var numberOfSlides = slides.length;		
var slideShowInterval;		
var speed = 5000;	 <!---Кажется это скорость прокрутки. Это можно менять-->	
//Assign a timer, so it will run periodically		
slideShowInterval = setInterval(changePosition, speed);						
slides.wrapAll('<div id="slidesHolder"></div>')								
slides.css({ 'float' : 'left' });							
//set #slidesHolder width equal to the total width of all the slides		
$('#slidesHolder').css('width', slideWidth * numberOfSlides);						
$('#slideshow')					
.prepend('<span class="nav" id="leftNav">Move Left</span>')				
.append('<span class="nav" id="rightNav">Move Right</span>');						
manageNav(currentPosition);						
//tell the buttons what to do when clicked			
$('.nav').bind('click', function() {										
//determine new position					
currentPosition = ($(this).attr('id')=='rightNav')					
? currentPosition+1 : currentPosition-1;																									
//hide/show controls				
manageNav(currentPosition);					
clearInterval(slideShowInterval);					
slideShowInterval = setInterval(changePosition, speed);						
moveSlide();		
});						
function manageNav(position) {				
//hide left arrow if position is first slide				
if(position==0){ $('#leftNav').hide() }					
else { $('#leftNav').show() }				
//hide right arrow is slide position is last slide					
if(position==numberOfSlides-1){ $('#rightNav').hide() }					
else { $('#rightNav').show() }				 }							
//changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked		
function changePosition() {				
if(currentPosition == numberOfSlides - 1) {						
currentPosition = 0;						
manageNav(currentPosition);				
} else {							
currentPosition++;							
manageNav(currentPosition);				
}					 moveSlide();		
}											
//moveSlide: this function moves the slide			
function moveSlide()
{						
$('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});		
}	 });

Ничего не изменилось, первый слайдер показывает место 3 картинок 6 (крутит первые три)
А в конце только выделилось место для слайдера, но фотографии не отображает.
И в main.css выдает ошибки часть №1.png

#8 Alexey11

Alexey11

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

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 18 Февраль 2014 - 20:05

Просмотр сообщенияCandyover (18 Февраль 2014 - 16:01) писал:


Ничего не изменилось, первый слайдер показывает место 3 картинок 6 (крутит первые три)
А в конце только выделилось место для слайдера, но фотографии не отображает.
И в main.css выдает ошибки Прикрепленный файл часть №1.png

данные ошибки в css отображаются из-за того , что в css файлах комментарии пишутся немного подругому, попробуйте изменить структуры <!-- --> на /* */

#9 Candyover

Candyover

    Продвинутый пользователь

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

Отправлено 18 Февраль 2014 - 21:58

Просмотр сообщенияAlexey11 (18 Февраль 2014 - 20:05) писал:

[size=4]

данные ошибки в css отображаются из-за того , что в css файлах комментарии пишутся немного подругому, попробуйте изменить структуры <!-- --> на /* */

абсолютно ничего не изменилось

#10 Vaccina

Vaccina

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

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

Отправлено 19 Февраль 2014 - 01:54

На счет комментариев в коде, то использование <!-- --> в css является ошибкой, извиняюсь что сразу не подредактировала, заменить их, как вас просят выше необходимо:

Цитата

<!-- --> на /* */

3 вместо 6ти, проблема скорее в одинаковых слайдерах на одной странице, удалите в данном шаблоне в самом низу дубликат.

#11 Z_Mc

Z_Mc

    Продвинутый пользователь

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

Отправлено 21 Февраль 2014 - 23:27

посоветуйте самый простой слайдер/карусель на все 3 категории на главной
Новинки
Хиты продаж
Интересные предложения

можно ли использовать 1 на эти все 3 категории?
можно ли его после добавить и для сопутки + " с этим товаром смотрят"?

если нельзя, то как сделать/свернуть эти категории по типу выпадающего меню
т.е. чтобы "Главная" имела примерно такой вид

Новинки (нажмите чтобы развернуть)
Хиты продаж (нажмите чтобы развернуть)
Интересные предложения (нажмите чтобы развернуть)

ну и чтобы разворачивалось независимо, а не одновременно ВСЁ как в случае с тегом "more"


---
ЗЫ. в идеале надо карусель + свернуть/развернуть группы "Новинки" и т.д.


типа спойлера сделал через Яву :) остался вопрос по каруселям
+ как ещё названия менять, когда раскрыто надпись заменить на "Скрыть"


ещё нашёл 1 проблему с этим самодельным спойлером :(
в Гугло-хроме работает, а в IE только 1й, другие нет + развёрнуты изначально... как исправить для всех браузеров?

#12 Vaccina

Vaccina

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

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

Отправлено 22 Февраль 2014 - 03:42

Тема с инструкцией по установке карусели на товары:
http://forum.storela...ресных-предлож/

#13 Z_Mc

Z_Mc

    Продвинутый пользователь

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

Отправлено 22 Февраль 2014 - 10:45

Просмотр сообщенияVaccina (22 Февраль 2014 - 03:42) писал:

Тема с инструкцией по установке карусели на товары:
http://forum.storela...ресных-предлож/

на сколько я понимаю, там пример для 1й категории и только для галавной

а вот на это что-нибудь ответьте

Цитата

ещё нашёл 1 проблему с этим самодельным спойлером :(
в Гугло-хроме работает, а в IE только 1й, другие нет + развёрнуты изначально... как исправить для всех браузеров?


#14 Z_Mc

Z_Mc

    Продвинутый пользователь

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

Отправлено 22 Февраль 2014 - 11:36

сделал вкладки на Главной, как описано тут

http://forum.storela..._120#entry61722

как убрать границу у всей таблицы?
и можно как-то симпатичней сделать меню вкладок?

#15 Z_Mc

Z_Mc

    Продвинутый пользователь

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

Отправлено 22 Февраль 2014 - 12:07

можно сделать вкладки как тут?
http://nettuts.s3.am...demo/index.html

хотя бы визуально



или как тут
http://www.queness.c...llto/index.html

#16 @lina_va

@lina_va

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

  • Модератоpы
  • 498 сообщений

Отправлено 22 Февраль 2014 - 15:07

Просмотр сообщенияZ_Mc (22 Февраль 2014 - 11:36) писал:

сделал вкладки на Главной, как описано тут

http://forum.storela..._120#entry61722

как убрать границу у всей таблицы?
и можно как-то симпатичней сделать меню вкладок?
Если речь идет о таблице со вкладками: новинки, хиты продаж и товары на главной, тогда чтобы убрать границу в main.css добавьте:
.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all {
border: 0px;
}

Просмотр сообщенияZ_Mc (22 Февраль 2014 - 12:07) писал:

можно сделать вкладки как тут?
http://nettuts.s3.am...demo/index.html

хотя бы визуально



или как тут
http://www.queness.c...llto/index.html
B main.css замените:
#primaryContent ul li {
background: url(http://design.akku13.ru/square_bullet.gif) no-repeat 0 0.4em;
padding-left: 5px;
}
на
#primaryContent ul li {
padding-left: 5px;
border: 0px;
}

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

  • 1.png


#17 Z_Mc

Z_Mc

    Продвинутый пользователь

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

Отправлено 22 Февраль 2014 - 15:42

Просмотр сообщения@lina_va (22 Февраль 2014 - 15:07) писал:

Если речь идет о таблице со вкладками: новинки, хиты продаж и товары на главной, тогда чтобы убрать границу в main.css добавьте:

убрать границу общую в таблице, обведено красным (на фотке во вложении)
убрать для всех браузеров, т.к. указав границу=0 в div убралось только для гугл-хрома, в IE осталось
<!-- Всевозможные списки товаров -->
{% IF index_page %}
<div id="tabs" style="border:0;">

Изображение

Просмотр сообщения@lina_va (22 Февраль 2014 - 15:07) писал:

B main.css замените:
2й пункт получился, всё ок на 1е время
а как указано выше нельзя сделать вкладки?

Просмотр сообщенияZ_Mc (22 Февраль 2014 - 12:07) писал:

можно сделать вкладки как тут?
http://nettuts.s3.am...demo/index.html

хотя бы визуально



или как тут
http://www.queness.c...llto/index.html


#18 @lina_va

@lina_va

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

  • Модератоpы
  • 498 сообщений

Отправлено 22 Февраль 2014 - 16:25

Просмотр сообщенияZ_Mc (22 Февраль 2014 - 15:42) писал:

убрать границу общую в таблице, обведено красным (на фотке во вложении)
убрать для всех браузеров, т.к. указав границу=0 в div убралось только для гугл-хрома, в IE осталось
<!-- Всевозможные списки товаров -->
{% IF index_page %}
<div id="tabs" style="border:0;">

Изображение


2й пункт получился, всё ок на 1е время
а как указано выше нельзя сделать вкладки?
B main/css добавьте:
#tabs {
border: 0px!important;
}


#19 Z_Mc

Z_Mc

    Продвинутый пользователь

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

Отправлено 22 Февраль 2014 - 20:12

добавил тень к кнопкам вкладок, как теперь

1) убрать серый фон за ними? (не кнопок, а фон на котором уже кнопки)
2) можно ли при клике на вкладку сделать эффект нажатия? т.е. неактивные вкладки с тенью, а активное без тени/нажат/выбран

#20 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 22 Февраль 2014 - 21:49

Просмотр сообщенияZ_Mc (22 Февраль 2014 - 20:12) писал:

добавил тень к кнопкам вкладок, как теперь

1) убрать серый фон за ними? (не кнопок, а фон на котором уже кнопки)
2) можно ли при клике на вкладку сделать эффект нажатия? т.е. неактивные вкладки с тенью, а активное без тени/нажат/выбран
1. в main.css в конце файла добавьте
.ui-tabs .ui-tabs-nav  {  background: none;border-bottom: none; }

2. не совсем поняла. Вам при наведении, нажатии или уже после открытия вкладки нужен эффект?




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

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