jCarousel - карусель пользователей и контента
11.07.2013, 19:18
Ещё один вариант скроллера информации, который вы можете установить к себя на сайт.

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

Шаг-1 Установка
Незабываем, что в систему uCoz уже вшита библиотека jQuery (версия 1.3.2 и 1.6.1), поэтому мы прописываем основные скрипты jCarousel, которые устанавливаем в конце нашей страницы, перед тегом :

Код
<script type="text/javascript" src="http://www.center-dm.ru/ucoz/jcarousel/jquery.jcarousel.pack.js"></script>  
<script type="text/javascript">  
function mycarousel_initCallback(carousel) {  
  carousel.buttonNext.bind('click', function() {  
  carousel.startAuto(0);  
  });  

  carousel.buttonPrev.bind('click', function() {  
  carousel.startAuto(0);  
  });  
   
  carousel.clip.hover(function() {  
  carousel.stopAuto();  
  }, function() {  
  carousel.startAuto();  
  });  
};  

jQuery(document).ready(function() {  
  jQuery('#center_dm_ru_carousel').jcarousel({  
  auto: 3,  
  wrap: 'last',  
  initCallback: mycarousel_initCallback  
  });  
});  
</script>

обратите внимание на то, что скроллер автоматически переключается между пользователями, а для того чтобы отредактировать интервал между переключением, изменим в данном скрипте значение 3 на своё.

Шаг-2 Создаём информер:
Теперь нам нужно создать информер, для этого заходим в

Админ панель => Инструменты => Информеры => Создать информер

и создаём информеры для пользователей:

Раздел: Пользователи
Способ сортировки: Кол. Комментарий
Количество материалов: 16
Количество колонок: 1

теперь в шаблон информера пользователи устанавливаем следующий html код:

Код
<li><a href="$PROFILE_URL$"><?if($AVATAR_URL$)?> <img class="jcarousel_img" alt="Аватар $USERNAME$" title="$USERNAME$" src="$AVATAR_URL$" /><?else?><img src="http://www.center-dm.ru/site/no_avatar.jpg" class="jcarousel_img" title="$USERNAME$" alt="аватар отсутствует" /><?endif?>$USERNAME$</li>

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

Шаг-3 Устанавливаем конечный код:
Теперь на страницу вашего сайта, там где хотите видеть скроллер jCarousel устанавливаем следующий html код:

Код
<!-- Начало тегов Карусель пользователей -->  
  <ul id="center_dm_ru_carousel" class="transparency_i">  
  $MYINF_1$  
  </ul>  
  <!-- /Конец тегов Карусель пользователей -->

Шаг-4 Устанавливаем css стили:
Заключительный шаг, в котором мы добавим css стили, которые будут отвечать за размер основной ячейки скроллера, размер аватара пользователя, отступы и переключатель между пользователями.

Код
/* Карусель пользователей  
------------------------------------------*/  
.jcarousel-clip {  
  z-index: 2;  
  padding: 0;  
  margin: 0;  
  overflow: hidden;  
  position: relative;  
}  

.jcarousel-list {  
  z-index: 1;  
  overflow: hidden;  
  position: relative;  
  top: 0;  
  left: 0;  
  margin: 0;  
  padding: 0;  
}  

.jcarousel-list li,  
.jcarousel-item {  
  float: left;  
  list-style: none;  
}  

.jcarousel-item {  
  text-align:center;  
  font:9px Verdana,Arial,Helvetica, sans-serif;  
  color:#999;  
  width:70px;  
}  
   
.jcarousel-container {  
  position: relative;  
  -moz-border-radius: 10px;  
  background: #F0F6F9;  
  border: 1px solid #B6D4E1;  
}  

.jcarousel-container-horizontal {  
  width: 285px;  
  padding: 10px 50px 7px 50px;  
}  

.jcarousel_img {  
  width: 50px;  
  height: 50px;  
  background: #fff;  
  border:1px solid #B6D4E1;  
  padding: 3px;  
  margin-bottom: 3px;  
}  

.jcarousel-next-horizontal {  
  position: absolute;  
  top: 27px;  
  right: 5px;  
  width: 32px;  
  height: 32px;  
  cursor: pointer;  
  background: transparent url('http://www.center-dm.ru/ucoz/jcarousel/next-horizontal.png') no-repeat 0 0;  
}  

.jcarousel-prev-horizontal {  
  position: absolute;  
  top: 27px;  
  left: 5px;  
  width: 32px;  
  height: 32px;  
  cursor: pointer;  
  background: transparent url('http://www.center-dm.ru/ucoz/jcarousel/prev-horizontal.png') no-repeat 0 0;  
}  

.jcarousel-next-horizontal:hover {  
  background-position: -32px 0;  
}  

.jcarousel-next-horizontal:active {  
  background-position: -64px 0;  
}  

  .jcarousel-prev-horizontal:hover {  
  background-position: -32px 0;  
}  

.jcarousel-prev-horizontal:active {  
  background-position: -64px 0;  
}  

.transparency_i a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; filter: alpha(opacity=50);}  
/* -------------------------------------- */

На этом всё, готовое решение закончено...
Категория: Пользователи | Добавил: Pincher | Теги: Пользователи, контента, пользователей, карусель, jCarousel
Просмотров: 340 | Загрузок: 0 | Рейтинг: 1.0/3
Всего комментариев: 0