http://cms-blog.ru/uploads/posts/2011-10/37-20111014-6523.jpg

DEMO

Галерея jCarouselLite предназначена для управления списком по вертикали и по горизонтали. Так же кроме управления списком можно использовать галерею для демонстрации контента. Пункты, которые могут быть как статическими элементами HTML, так и загружаемыми с помощью (или без) AJAX, могут прокручиваться вперед или назад с анимации и без нее.


И так опишем все по пунктам. Что нам нужно для вывода jCarouselLite на сайте?
-На сайте должна быть поддержка jQuery, если ее нету тогда надо скачать скрипт и подключить его в шаблоне.
-Нам надо подключить сам скрипт jCarouselLite (у меня он немного доработан, внесены некоторые изменения, чтобы добавить нумерацию страниц в сценарий)
-Вызов скрипта jCarouselLite и задание ему параметров по которым будет выполнятся анимация прокручивания, количество отображаемых элементов и элементы управления (навигация).
-Что бы красиво все выглядело прописать стили CSS для нашего HTML кода.
Вставляем HTML код в том месте где надо выводить галерею.

Теперь опишу все эти пункты подробно:

1. Плагин jQuery надо подключить между тегами <head> </head> (в том случае если у вас его нету)

Код:
<script type="text/javascript" src="http://forumstatic.ru/files/0011/8c/a9/29598.js"></script>

2. Сразу после подключения jQuery между этими тегами подключаем галерею jCarouselLite

Код:
<script type="text/javascript" src="http://forumstatic.ru/files/0011/8c/a9/22752.js"></script>

3. Теперь после подключения jCarouselLite сделаем вызов нашей галереи (пока с стандартными настройками, ниже опишу какие параметры можно указывать)

Код:
<script>
$(function() {
    $(".carousel").jCarouselLite({ });
});
</script>

4. Подключим наши стили CSS для оформления галереи. Открываем уже существующий файл стилей, или создадим свой файл для скрипта jCarouselLite.css и подключим его, или непосредственно между тегами <head> </head> (так можно подключать стили сразу в шаблон). Описывать что какой стиль делает нету смысла, это простое оформление.

Код:
<style type="text/css">
.carousel {
    float:left;
    width:470px;
    margin:0 0 10px;
}
.carousel li {
    float:left;
    height:200px;
    list-style:none;
}
.carousel h1 {
    font-size:14pt;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    text-align:left;
    margin:0 0 15px;
}
.carousel h1 a {
    color:#83390d;
    text-decoration:none;
}
.carousel h1 a:hover {color:#dc5807;}
.carousel p {text-align:justify;}
.carousel img {
    float:left;
    width:198px;
    border:1px solid #83390d;
    margin-right:10px;
}
.prev, .next {
    display:block;
    float:left;
    width:42px;
    height:42px;
    margin-top:79px;
}
.prev {
    background:url(http://forumstatic.ru/files/0011/8c/a9/55942.png) no-repeat;
    margin-right:10px;
}
.next {
    background:url(http://forumstatic.ru/files/0011/8c/a9/55942.png) -44px 0 no-repeat;
    margin-left:10px;
}
.prev:hover {background:url(http://forumstatic.ru/files/0011/8c/a9/55942.png) 0 -44px no-repeat;}
.next:hover {background:url(http://forumstatic.ru/files/0011/8c/a9/55942.png) -44px -44px no-repeat;}
.go {margin:0 0 10px 47px;}
.go a {
    float:left;
    width:10px;
    height:11px;
    text-indent:-9999px;
    background:url(http://forumstatic.ru/files/0011/8c/a9/44663.png) no-repeat;
    margin-left:5px;
}
.go a:hover {background-position:0 -11px;}
.go .goActive {background-position:0 -11px;}
</style>

5. И напоследок пропишем HTML код в том месте где надо выводить галерею jCarouselLite.

Код:
<div class="carousel">
    <ul>
        <li>Первый элемент</li>
        <li>Второй элемент</li>
        <li>Третий элемент</li>
        .........
        <li>N элемент</li>
    </ul>
</div>

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

btnPrev: null - Параметр, указывающий на класс или id кнопки, который ведет сразу к предыдущему элементу [".prev"]
btnNext: null - Параметр, указывающий на класс или id кнопки, который ведет сразу к следующему элементу [".next"]
btnGo: null - Параметр, указывающий на классы или id кнопок, которые ведут сразу к определенному элементу галереи [".0", ".1", ".2"]
auto: null - Время через которое галлерея автоматически прокрутится [1сек = 1000]
hoverPause: false - При наведении на элемент галереи останавливается автоматическая прокрутка [false - не останавливать, true - останавливать]
mouseWheel: false - Включает прокрутку колесиком мышки, необходим mousewheel.js [false - выключено, true - включено]
speed: 500 - Скорость пролистывания [1сек = 1000]
easing: null - Дергающийся эффект, необходим easing.js ["easeOutElastic"]
vertical: false - Включает вертикальное отображение, по умолчанию горизонтальная [false - горизонтальное, true - вертикальное]
circular: true - Отключает цикл, по умолчнию включен [false - выключено, true - включено]
visible: 1 - Количество отображаемых элементов
start: 0 - С какого элемента начинать показывать
scroll: 1 - Сколько элементов прокручивает за одно нажатие или прокрутку колесиком мышки
beforeStart: null - Обратная функция начала показа, выполняется сразу же при перелистывании [function(a) {alert("Before animation starts:" + a);]
afterEnd: null - Обратная функция конца показа, срабатывает сразу после завершения перелистывания [function(a) {alert("After animation ends:" + a);]

Значение null для переменной означает что его присутствие не обязательно и если потребуется то можно указать в вызове скрипта.
Переменная mouseWheel будет работать только тогда, когда переменная hoverPause выключена, то есть значение false.
Для переменной easing нужно подключить скрипт easing.js по аналогии выше описанных скриптов, это позволит сделать разные эффекты анимации перехода между элементами.

Теперь сделаем вызов скрипта jCarouselLite с нужными параметрами на конкретном примере:

Пусть у нас будет семь элементов в галереи.
Подключим кнопки "Вперед" и "Назад" для перехода между элементами и присвоим им классы ".prev" и ".next"
Подключим нумерацию страниц и присвоим им классы ".1", ".2", ".3", ".4", ".5", ".6", ".7"
Изменим скорость пролистывания элементов "speed" и присвоим значение "200" вместо того что по умолчанию "500", то есть скорость будет больше.
Сделаем что бы переход между элементами был автоматический и время между переходами было 3 секунды. Для этого для переменной "auto" присвоим значение "3000"
Так же еще один вариант навигации - прокрутка колесиком мышки, для этого для переменной "mouseWheel" дадим разрешение и присвоим значение "true". Но стоит помнить что эта навигация будет работать только тогда когда переменная "hoverPause" принимает значение "false" (то есть по умолчанию).
И напоследок сделаем так что бы для каждой кнопки которая будет показывать какой элемент показывается присваивался класс "goActive" который мы описали в стилях. Для этого используем переменную "afterEnd" и присваиваем ей функцию смены стиля для кнопок с классами ".1", ".2", ".3", ".4", ".5", ".6", ".7". Срабатывать эта функция будет сразу после завершения перелистывания.

Вот наш скрипт вызова галереи jCarouselLite:

Код:
<script>
$(function() {
    $(".carousel").jCarouselLite({
        btnPrev: ".prev",
        btnNext: ".next",
        btnGo: [".1", ".2", ".3", ".4", ".5", ".6", ".7"],
        speed: 200,
        auto: 3000,
        mouseWheel: true,
        afterEnd:
            function(a, to, btnGo) {
                if(btnGo.length <= to){
                    to = 0;
                }
                $(".goActive").removeClass("goActive");
                $(btnGo[to]).addClass("goActive");
            }

    });
});
</script>

Теперь нам осталось только подключить HTML код в том месте где надо выводить галерею jCarouselLite.

В коде мы пропишем кнопки "Вперед" и "Назад" для перехода между элементами, количество наших элементов в галереи (семь блоков) и навигацию по элементам в виде нумерации страниц.

Код:
<div class="prev"></div>
<div class="carousel">
    <ul>
        <li>Первый элемент</li>
        <li>Второй элемент</li>
        <li>Третий элемент</li>
        <li>Четвертый элемент</li>
        <li>Пятый элемент</li>
        <li>Шестой элемент</li>
        <li>Седьмой элемент</li>
    </ul>
</div>
<div class="next"></div>
<div style="clear:both;"></div>
<div class="go">
    <a href="#" onclick="" class="1 goActive">1</a>
    <a href="#" onclick="" class="2">2</a>
    <a href="#" onclick="" class="3">3</a>
    <a href="#" onclick="" class="4">4</a>
    <a href="#" onclick="" class="5">5</a>
    <a href="#" onclick="" class="6">6</a>
    <a href="#" onclick="" class="7">7</a>
</div>

Если вам понравилась эта галерея, то вы можете ее скачать в том виде как она показывается одним архивом:

В архив входят такие файлы:
jquery.js - плагин jQuery
jcarousel.js - скрипт галереи
mousewheel.js - скрипт для перелистывания мышкой
easing.js - скрипт для анимации переходов
prev_next.png - картинка кнопок переходов "Вперед" и "Назад"
go.png - картинка кнопок для нумерации страниц
carousel.html - HTML документ где все это подключено
02.jpg - 07.jpg - картинки для галереи

Скачать:jcarousel.zip[96.1 Kb]