Регистрация    Войти
Авторизация

Слайдер для uCoz с миниатюрами

Слайдер для uCoz с миниатюрами

Слайдер для uCoz с миниатюрами. В данной статье будет рассказано, как благодаря двум информерам uCoz, знаниям html-css и библиотеки jQuery, создать на своём сайте слайдер новостей с миниатюрами.

Установка:
И так мы всё знаем, а кто не знает читает, на сайтах 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>


Отлично, теперь нам необходимо создать два одинаковых информера, но с разным 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>

Наш слайдер почти готов, всё что нам осталось, так это прописать 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;
}/* -------------------------------------- */

Хочу напомнить, что следует устанавливать именно системную переменную информера такого вида ($MYINF_1$), а не прописывать ссылкой, в противном случае информер может отображать контент неверно или вообще перестанет работать как показано на странице демо.

Скорость слайдера меняем во втором скрипте, меняем значение 2000 на своё. Новые скрипты для ucoz

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  6-01-2012, 21:26   Просмотров: 6773   
слайдер, сайте, новостей, библиотеки, информерам, благодаря, двум, данной, jQuery, Слайдер, будет,
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Пользователь offline mrkenny 10 января 2012 03:51
Жалко для WP нет такова у вас на сайте, так бы хорошо смотрелось на одим мой сайт.

          1
Пользователь offline mixo 10 января 2012 09:14
Во спасибо! Хороший слайд, как раз хотел поставить его на свой сайт, а тут такая удача)

          2
Пользователь offline sfinksmurka 21 января 2012 16:54
о красиво очень, возьму себе

          3
Пользователь offline taukaevo 30 января 2012 14:31
спасибо! Жалко с ucoz давно ушел...... а так щас под dle сделаю =)

          4
Пользователь offline Budda 30 января 2012 14:45
Нормальный слайдер? А как картинку уменьшит??

          5
Пользователь offline epox255 30 января 2012 19:55
спасибо! Помогло!

          6
Пользователь offline Davidrich 3 марта 2012 02:00
А куда вставить первый скрипт?!

          7
Пользователь offline elt 21 апреля 2012 00:08
Спасибо, хороший скрипт, и главное - вовремя.

          8

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.