» » >

Слайдер для uCoz с миниатюрами
·
25.09.2013, 17:48

Всем доброго утра, сегодня мы с вами будем создавать очередной слайдер для uCoz новостей, поискав на европейских блогах слайдер я так и не нашёл нужного мне решения, так как была одна большая загвоздка во многих слайдерах, не подходила встроенная в uCoz библиотека jQuery, я уже собирался идти пить чай, как тут наткнулся на слайдер с миниатюрами, сразу скажу дабы не огорчать многих пользователей, у данного слайдера имеется один большой минус, мы будем использовать не один информер новостей как положено, а два и так смотрим демо...

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

И так мы всё знаем, а кто не знает читает, на сайтах uCoz уже встроена библиотека jQuery, поэтому нам следует установить в конец страницы перед тегом </body> следующие два скрипта:

JS

<script type="text/javascript" src="http://ucoz-helper.ucoz.com/sliders/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 код:

HTML-Code

<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 код:

HTML-Code

<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 код каркаса нашего слайдера, с информерами:

HTML-Code

<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:

Наш слайдер почти готов, всё что нам осталось, так это прописать css стили:

CSS-Code

/* Слайдер с миниатюрами
------------------------------------------*/
#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://ucoz-helper.ucoz.com/sliders/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://ucoz-helper.ucoz.com/sliders/icon-uparrowsmallwhite.png) top center no-repeat;
}/* -------------------------------------- */
Примечания:

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

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

Категория: Слайдеры | Добавил: tashkent97
Просмотров: 1211 | Загрузок: 408 | Источник: center-dm.ru | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<