Ещё один вариант скроллера информации, который вы можете установить к себя на сайт.
В данном примере, заместо лучших пользователей, можно разместить новости в случайном порядке благодаря информерам uCoz, новые фотографии, рекламный блог или использовать в анкете пользователя как скроллер подарков, как говориться фантазии нет придела...
Шаг-1 Установка скрипта:
Незабываем, что в систему uCoz уже вшита библиотека jQuery (версия 1.3.2 и 1.6.1), поэтому мы прописываем основные скрипты jCarousel, которые устанавливаем в конце нашей страницы, перед тегом :
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);}
/* -------------------------------------- */
На этом всё, готовое решение закончено...
