jCarousel - карусель пользователей и контента


jCarousel - карусель пользователей и контента

3394
7 из 10
Проголосовало: 8






Ещё один вариант скроллера информации, который вы можете установить к себя на сайт.

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

Шаг-1 Установка скрипта:

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

Code
<script type="text/javascript" src="http://webo4ka.ru/Ucoz4/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 код:

HTML-Code

Code
<li><a href="$PROFILE_URL$"><?if($AVATAR_URL$)?> <img class="jcarousel_img" alt="Аватар $USERNAME$" title="$USERNAME$" src="$AVATAR_URL$" /><?else?><img src="http://webo4ka.ru/Ucoz4/jquery.jcarousel.packno_avatar.jpg" class="jcarousel_img" title="$USERNAME$" alt="аватар отсутствует" /><?endif?>$USERNAME$</li>


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

Шаг-3 Устанавливаем конечный код:

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

HTML-Code

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


Шаг-4 Устанавливаем css стили:

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

CSS-Code

Code
/* Карусель пользователей  
  ------------------------------------------*/  
  .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://webo4ka.ru/Ucoz4/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://webo4ka.ru/Ucoz4/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);}  
  /* -------------------------------------- */


На этом всё, готовое решение закончено...
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://www.center-dm.ru/
  • Всего комментариев: 6

zizi
0
zizi написал: Написано 09 Октября 2011 в 20:50
Комментарий №6
не работает в Explorer не понятно почему только sad

vovik1646
0
vovik1646 написал: Написано 11 Сентября 2011 в 15:45
Комментарий №5
Работает отлично спасибо, а с увеличением размера верно сказано!

вовик1646
0
вовик1646 написал: Написано 14 Июля 2011 в 19:05
Комментарий №2
Та же история biggrin

DIMON_-_BEST
0
DIMON_-_BEST написал: Написано 14 Июля 2011 в 13:32
Комментарий №1
Я себе на сайт не знаю даже куда пристроить_)

InteGrant
0
InteGrant написал: Написано 14 Июля 2011 в 20:00
Комментарий №3
На верх форума приделай
И увеличь скрипт и всё biggrin

DJ_FORWARD
0
DJ_FORWARD написал: Написано 14 Июля 2011 в 21:42
Комментарий №4
Так было бы четко.... smile

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: