kiryuha39rus
  • Репутация: 1
  • Форум: 5
Keni
  • Репутация: 0
  • Форум: 0
Bukmeker
  • Репутация: 0
  • Форум: 0
16:46 в 16:46Слайдер для uCoz
Слайдер для uCoz
Неплохой,скорее всего даже отличный слайдер на ваш сайт, который с почётом заменит и приукрасит пустующее место на вашем сайте

Установка:

Шаг 1 - Установим JS:


И так, мы всё знаем, а кто не знает, читает, на сайтах uCoz уже встроена библиотека jQuery, поэтому нам следует установить в конец страницы перед тегом следующие два скрипта:
Код
<script type="text/javascript" src="http://www.center-dm.ru/ucoz/ContentSlider/jquery1.2.pack.js"></script>  
<script type="text/javascript">  
  var theInt = null;  
  var $crosslink, $navthumb;  
  var curclicked = 0;  
  theInterval = function(cur){  
  clearInterval(theInt);  
  if( typeof cur != 'undefined' )  
  curclicked = cur;  
  $crosslink.removeClass("active-thumb");  
  $navthumb.eq(curclicked).parent().addClass("active-thumb");  
  $(".stripNav ul li a").eq(curclicked).trigger('click');  
  theInt = setInterval(function(){  
  $crosslink.removeClass("active-thumb");  
  $navthumb.eq(curclicked).parent().addClass("active-thumb");  
  $(".stripNav ul li a").eq(curclicked).trigger('click');  
  curclicked++;  
  if( 6 == curclicked )  
  curclicked = 0;  
  }, 2000);  
  };  

  $(function(){  
  $("#center_dm-ru_photoslider").codaSlider();  
  $navthumb = $(".nav-thumb");  
  $crosslink = $(".cross-link");  
  $navthumb  
  .click(function() {  
  var $this = $(this);  
  theInterval($this.parent().attr('href').slice(1) - 1);  
  return false;  
  });  
  theInterval();  
  });  
</script>


Шаг 2 - Установим HTML:

Отлично, теперь нам необходимо создать два одинаковых информера, но с разным html кодом в шаблоне:
Заходим в Админ панель => Инструменты => Информеры => Создать информер

Раздел: Новости
Тип данных: Материал
Способ сортировки: Количество просмотров (на своё усмотрение)
Количество материалов: 5
Количество колонок:1

И устанавливаем в первый информер следующий html код:

Код
<div class="panel" title="Panel $NUMBER$">  
  <div class="wrapper">  
  <?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" alt="temp"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" alt="temp"><?endif?><?endif?>  
  <div class="photo-meta-data">  
  <a href="$ENTRY_URL$">$TITLE$</a>  
  </div>  
  </div>  
</div>


Создаём второй информер с такими же параметрами как в первом информере и вставляем в его шаблон следующий html код:
Код
<div><a href="#$NUMBER$" class="cross-link"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" class="nav-thumb" alt="temp-thumb" /><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" class="nav-thumb" alt="temp-thumb" /><?endif?><?endif?></a></div>


Теперь установим в нужное место на страницы вашего сайта, следующий основной html код каркаса нашего слайдера, с информерами:
Код
<div id="page-wrap">  
  <div class="slider-wrap">  
  <div id="center_dm-ru_photoslider" class="csw">  
  <div class="panelContainer">$MYINF_1$</div>  
  </div>  
  <div id="movers-row">$MYINF_2$</div>  
  </div>  
</div>


Шаг 3 - Установим в CSS:

Код
/* Слайдер с миниатюрами  
------------------------------------------*/  
#page-wrap {  
  position: relative;  
  width: 502px;  
}  

#page-wrap a {outline: none; text-decoration:none;}  
#page-wrap a:link,  
#page-wrap a:visited {color:#cbcbcb; text-shadow: 1px 1px 1px #000;}  
#page-wrap a:hover {color:#8cea87;}  

.slider-wrap {  
  position: absolute;  
  overflow: hidden;  
  width:502px;  
  height: 150px;  
}  
   
  .panelContainer {  
  position: relative;  

}  

.stripViewer {  
  position: relative;  
  overflow: hidden;  
  width: 502px;  
  height: 150px;  
}  

.panel {  
  float: left;  
  position: relative;  
  width: 502px;  
}  

.wrapper {  
  border: 1px solid #333;  
}  

.photo-meta-data {  
  position: relative;  
  font: 110%/1.5 Verdana,Arial,Helvetica, sans-serif; font-weight: bold;  
  color:#cbcbcb; text-shadow: 1px 1px 1px #000;  
  background: url(http://www.center-dm.ru/ucoz/ContentSlider/transpBlack.png);  
  padding: 5px 5px 5px 5px;  
  margin-top: -30px;  
  z-index: 9999;  
}  

.stripNavL,  
.stripNavR,  
.stripNav {display: none; }  

#movers-row {  
  width: 502px;  
  margin: -43px 0 0 0;  
}  

#movers-row div {  
  float: left;  
  width: 90px;  
  height: 30px;  
  margin: 0px 5px 10px 5px;  
}  

#movers-row img {  
  width: 90px;  
  height: 30px;  
  border: 1px solid #333;  
}  

.cross-link {  
  position: relative;  
  display: block;  
  width: 90px;  
  margin-top: -8px;  
  padding-top: 10px;  
  z-index: 9999;  
}  

.active-thumb {  
  background: transparent url(http://www.center-dm.ru/ucoz/ContentSlider/icon-uparrowsmallwhite.png) top center no-repeat;  
}/* -------------------------------------- */


[/c]Примечания:[/c]
Следует устанавливать именно системную переменную информера такого вида ($MYINF_1$), а не прописывать ссылкой, в противном случае информер может отображать контент неверно или вообще перестанет работать как показано на странице демо.

Скорость слайдера меняем во втором скрипте, меняем значение 2000 на своё.
Автор: Гость Категория: Прочее Просмотров: 1023

Скачать архив
  • Формат: .rar
  • Файла нет
Внимание! Материал "Слайдер для uCoz" полностью уникальный. Копирование без указания источника категорически запрещено!
Загрузок: 0 Комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Интересное в сети
Вечный друг
Andruoid.ru - Всё для Андроида!
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Всего: 7 +0 новых
Никого нету
Посетители за сегодня ()
Мини - профиль