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


Инструкция Как Установить Слайдер


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

#1 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 26 Апрель 2012 - 15:38

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

1. Открываем Редактор тем - HTML, после кода
<td id="primaryContent">
ставите следующий кусок:
<style type="text/css"> 
 #slidebackgr 
{   
width:610px;   <!---Это можно менять-->
height:345px;   <!---Это можно менять-->
margin-top:10px;   <!---Это можно менять-->
padding:0;   
position:relative;  
 background-image: url([url="http://img.storeland.ru/web/upload/assets/images/29/28867/slide_bg1.png"]http://img.storeland...7/slide_bg1.png[/url]); <!---Это меняем-->
	} 
   #slideshow 
#slideshowWindow { 
  width:576px;  <!---Это можно менять-->
 height:300px;  <!---Это можно менять-->
 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([url="http://img.storeland.ru/web/upload/assets/images/29/28867/previous.png"]http://img.storeland...67/previous.png[/url]);  <!---Это меняем-->
   background-repeat:no-repeat;
 	z-index:999; }  
 #rightNav { 	
top:260px;   <!---Это можно менять-->
  left:550px;<!---Это можно менять-->
 	width:53px; 
	height:36px; 
	background-image:url([url="http://img.storeland.ru/web/upload/assets/images/29/28867/next.png"]http://img.storeland.../28867/next.png[/url]);   <!---Это меняем-->
  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 = 9000;	<!---Кажется это скорость прокрутки. Это можно менять-->  	
 //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="http:ссылка">	
		<img src="http://КАРТИНКА1.jpg" /> <!---Это меняем-->
</div>   
 	<div class="slide"> 
<a href="http://ссылка">	
		<img src="http://КАРТИНКА2.jpg" /> <!---Это меняем-->
</div>	   			
	<div class="slide"> 
<a href="http://ссылка">	
		<img src="http://КАРТИНКА3.jpg" /><!---Это меняем-->
 </div>   

   	</div>  	</div>  </div> </div>
    

2. Вставьте  в самом вверху
<script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom.min.js"></script>
в начале страницы, там где прописаны скрипты.

3. Создайте картинки 576*300 пикселов. Загрузите в Редактор тем - внизу загрузка файлов. Подставьте их вместо слов кода КАРТИНКА, и пропишите необходимые ссылки на ваши страницы вместо слов ССЫЛКА.

4. Заключительное, перенесите всю информацию на свой сайт:
сохраните картинки в разделе Редактор тем - внизу Файлы:
http://img.storeland...7/slide_bg1.png
http://img.storeland.../28867/next.png
http://img.storeland...67/previous.png

Здесь желательно заменить данные картинки на свои, оригинальные, кнопки и подложку, сменить цвет, размер и т.д. Теперь новые ссылки пропишите вместо предыдущих в код.
Теперь можно поиграть цифрами, подогнать размеры. Также можно переместить прокрутку в другое место, раздвинуть на оба края.

П.С. Часть кода я меняла по ходу, возможны ошибки. Сама чайник.
П.П.С. Чтобы ляпов не было видно, лично я большой блок выставила в страницу Поиск, а не ХТМЛ, пока настраиваю, это не портит дизайн сайта.

#2 Shaman

Shaman

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

  • Пользователи
  • PipPipPip
  • 96 сообщений
  • ГородМосква

Отправлено 26 Апрель 2012 - 17:37

Скажите пожалуйста. Я у себя почему то не могу найти вот этот код <td id="primaryContent">.
И вообще не могли бы Вы дать ссылочку на все файлы, которые на сайт надо закинуть? Или кроме картинок ничего не надо?

#3 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 26 Апрель 2012 - 22:10

Просмотр сообщенияShaman (26 Апрель 2012 - 17:37) писал:

Скажите пожалуйста. Я у себя почему то не могу найти вот этот код <td id="primaryContent">.
И вообще не могли бы Вы дать ссылочку на все файлы, которые на сайт надо закинуть? Или кроме картинок ничего не надо?

Я указала для шаблона Мокко, Думаю, Вы можете разместить данный код над тегом {BODY}

#4 Shaman

Shaman

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

  • Пользователи
  • PipPipPip
  • 96 сообщений
  • ГородМосква

Отправлено 27 Апрель 2012 - 08:14

Просмотр сообщенияogonek7777 (26 Апрель 2012 - 22:10) писал:

Я указала для шаблона Мокко, Думаю, Вы можете разместить данный код над тегом {BODY}

Понял, буду пробовать

#5 natali5625

natali5625

    Пользователь

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

Отправлено 08 Июль 2012 - 19:44

"пропишите необходимые ссылки на ваши страницы вместо слов ССЫЛКА." какие?
очень все подробно, спасибо огромное, но вот это не понятно, может вопрос и глупый, но очень прошу Вас ответить, думаю что именно из за этого не получается свои картинки вставить.

#6 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 08 Июль 2012 - 22:10

Просмотр сообщенияnatali5625 (08 Июль 2012 - 19:44) писал:

"пропишите необходимые ссылки на ваши страницы вместо слов ССЫЛКА." какие?
очень все подробно, спасибо огромное, но вот это не понятно, может вопрос и глупый, но очень прошу Вас ответить, думаю что именно из за этого не получается свои картинки вставить.

ССЫЛКА - это ваши страницы, которые должны открываться, когда кликают по картинкам.
Чтобы картинки открывались, залейте себе в Редактор тем ваши картинки одинакового формата (вот это кликая на них будут открываться ваши ССЫЛКИ), кликните поочередно на каждую из них, они откроются в новом окне, теперь скопируйте ссылку в браузере каждой картинки и вставьте вместо
http://КАРТИНКА1.jpg и остальных

#7 natali5625

natali5625

    Пользователь

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

Отправлено 09 Июль 2012 - 18:43

Спасибо вам огромное, что ответили, только я все равно не пойму где мне брать ссылку на КАРТИНКУ, она ведь на компутере у меня, как тогда мне её прописать?
И еще, может вы мне подскажете, как добавлять пункты меню с лева. Все облазила уже, ни где не найду. Я очень буду благодарна. У вас сайтик такой симпатичный получается, не навязчивый, приятный и столько всего интересного.

#8 Святой

Святой

    Пользователь

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

Отправлено 11 Июль 2012 - 22:59

спасибо, очень помогло

#9 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 12 Июль 2012 - 16:27

Просмотр сообщенияnatali5625 (09 Июль 2012 - 18:43) писал:

Спасибо вам огромное, что ответили, только я все равно не пойму где мне брать ссылку на КАРТИНКУ, она ведь на компутере у меня, как тогда мне её прописать?
И еще, может вы мне подскажете, как добавлять пункты меню с лева. Все облазила уже, ни где не найду. Я очень буду благодарна. У вас сайтик такой симпатичный получается, не навязчивый, приятный и столько всего интересного.

Пожалуйста, читайте внимательно пункт 3 и 4, да и надо уяснить, что ни одна картинка, не загруженная к Вам на сайт в бэк-ап, не станет отображаться на сайте. Соответственно, заходите Редактор тем -> Файлы (внизу),
Изображение

Открываете ссылку Добавить Файли и Загружаете:
Изображение
Далее обратите внимание на загруженную картинку (поэтому не забудьте ее название!), кликните по ней, она откроется в новом окне, вверху будет ссылка на нее примерно такого вида:
Изображение
Вот эту ссылку Вы и должны скопировать и вставить где я указала КАРТИНКА.

2. Чтобы сделать левую колонку, зайдите в ХТМЛ, найдите в конце блок
<!-- Полное SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_LARGE %}
  <div style="padding-top:1em;" class="htmlDataBlock">
	{PAGE_SEO_DESCRIPTION_LARGE}
  </div>
{% ENDIF %}
<!-- END Полное SEO-описание -->{% ENDIF %}


  </td>  
Главное, чтоб там присутствовал  закрывающий тэг </td>. Сразу после этого тега откройте следующую колонку тегом  <td> и прописывайте то что хотите, пример:
у меня после указанного первого кода стоит:
<td id="leftMenuBlockWrap"> 
  	<div id="leftMenuBlock"> 
  <h4 class="contentTbodyCatalogHeader"><a href="http://{NET_DOMAIN}/cart">&nbsp;Корзина</a></h4>
  <div id="cartInfo">
		&nbsp;&nbsp;Товаров на:
		<span id="cartSum">
	  	{% IF cart_count_empty %}
			<span class="red">0</span> {CURRENCY_NAME}
	  	{% ELSE %}
			{% FOR cart_sum %}
		  	<span>{cart_sum.NOW | money_format}</span>
			{% ENDFOR %} 
	  	{% ENDIF %} 
			</span> </div>
То есть я выдрала часть информации с правой колонки и перенесла в левую (но можно и вставить баннеры). После всего, что вставите, поставьте закрывающий тег </td>, он должен оказаться перед строчкой  <!-- Подвал сайта -->.
Если трудно, прочтите в интернете о построении HTML-таблиц. Это просто.




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

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