На днях возникла задача сделать небольшой скроллер/слайдер изображений. Время на поиски готового решения было ограничено, поэтому решила использовать практически первое, что попалось на глаза: Accessible News Slider (http://www.reindel.com/accessible_news_slider/)
Плагин понравился, в основном, своим микроскопическим размером (3Кб в несжатом виде). Меня даже не смутило то, что скрипт позиционируется как скроллер новостей, а совсем даже не изображений.
Базовая разметка, которую предлагает автор плагина, меня не совсем устроила (в силу специфики верстки, в которую нужно было интегрировать скроллер), а также смутило отсутствие возможности организовать прокрутку изображений по кругу. Т.е., по-умолчанию, плагин реализует прокрутку таким образом, что картинки прокручиваются до конца и на этом действо останавливается. Мне же захотелось изобразить возврат к первому изображению, в случае достижения конца списка.
Итак, представляю результаты своего творчества.

1. Подключение скриптов
• Подключаем jQuery:

1
2
3
4
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>

• Подключаем скрипт слайдера

1
<script type="text/javascript" src="js/slider.js"></script>

• Подключаем файл с инициализацией плагина

1
<script type="text/javascript" src="js/demo.js"></script>

1. HTML-разметка

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--demonstration::begin-->
<div class="slider">
 
    <h3>Изображения</h3>
    <div class="view_all"></div>
   
    <a id="next">Вперед</a>                
    <a id="back">Назад</a>
   
    <div id="image_slider">
        <ul>
            <li><a href="#"><img src="_temp/1.jpg" alt="" /></a></li>
            <li><a href="#"><img src="_temp/2.jpg" alt="" /></a></li>
            <li><a href="#"><img src="_temp/3.jpg" alt="" /></a></li>
            <li><a href="#"><img src="_temp/4.jpg" alt="" /></a></li>
            <li><a href="#"><img src="_temp/5.jpg" alt="" /></a></li>
            <li><a href="#"><img src="_temp/6.jpg" alt="" /></a></li>
            <li><a href="#"><img src="_temp/7.jpg" alt="" /></a></li>
            <li><a href="#"><img src="_temp/8.jpg" alt="" /></a></li>
            <li><a href="#"><img src="_temp/9.jpg" alt="" /></a></li>
            <li><a href="#"><img src="_temp/10.jpg" alt="" /></a></li>
        </ul>
    </div>                            
</div>
<!--demonstration::end-->

• Оберточный div – “scroll_sites”. Функциональной нагрузки не несет, служит оформительским и прочим высоким целям.
• Заголовок области <h3> </h3> – аналогично предыдущему пункту, не играет никакой роли. Вместо него может быть любой другой элемент. Даже свежая фотка любимого котэ.
• Ссылки “Вперед” и “Назад” – важные функциональные элементы. Id (#next и #back) этих элементов должны оставаться в неприкосновенности.
• Оберточный div#image_slider. Именно к этому элементу мы будем “привязывать” слайдер.
• Список <ul> <li>, в котором, собственно и находятся изображения

Разметка готова. Смотрим результаты первого шага (http://www.zaisl.info/demo/slider/step1.html). Получилось нечто неудобоваримое, сейчас будем исправлять ситуацию с помощью CSS.

Но, прежде чем мы приступим к оформлению, давайте определимся с размерами изображений, а также величиной видимой области прокрутки.
Исходные данные:
• Размер изображений: 150х150px
• Видимых изображений в области прокрутки: 3
• Прокручивать будем по 2 изображения за раз
• В качестве кнопок “Вперед” и “Назад” будем использовать вот такие плашки (22х150px):

плашки

Теперь приступаем к написанию CSS

2. CSS-разметка

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/*
Мы определили, что изображения будут величиной 150px,
следовательно элемент <li>, в котором находятся изображения,
можно сделать чуть больше и создать тем самым дополнительные отступы.
Будем делать каждый <li> шириной 160px.
Дополнительно в области находятся плашки "Вперед" и "Назад", шириной 22px каждая.
Следовательно, вся область должна быть шириной: 160*3 + 22*2 = 524px
*/
.slider{
    margin: 10px 2px 0 2px;
    overflow: hidden;
    padding: 0 0 0 20px;
    width: 524px;
}
    /*Строчка с общим количеством элементов
    и ссылкой 'Развернуть/Свернуть'*/
    .slider .view_all{
        clear: both;
        /*Задаем высоту элемента,
        чтобы не было скачков при загрузке страницы*/
        height: 15px;
    }
 
    /*Кнопки 'Вперед' и 'Назад'*/
    .slider a#next,
    .slider a#back{
        width: 22px;
        height: 150px;
        display: block;
        overflow: hidden;        
        text-indent: -10000em; /*Скрываем текст ссылок*/
        cursor: pointer;
        margin: 13px 0 0 0;
    }
    /*Кнопка 'Вперед' */
    .slider a#next{
        float: right;
        background: url(../images/next.png) top left no-repeat;
    }
    /*Кнопка 'Назад' */
    .slider a#back{
        float: left;
        background: url(../images/back.png) top left no-repeat;
       
    }
    /*Кнопка 'Вперед' при наведении*/
    .slider a#next:hover{
        background: url(../images/next_h.png) top left no-repeat;
    }
    /*Кнопка 'Назад' при наведении*/
    .slider a#back:hover{
        background: url(../images/back_h.png) top left no-repeat;
    }
   
    /*Основная область со слайдером
    Ширину области рассчитываем как:
    [ширина_каждого_элемента_списка] * [колво_видимых_элементов]
    160 * 3 = 480px
    */
    #image_slider{
        display: block;
        width: 480px;
        overflow: hidden;
        padding: 0;        
    }
        /*Список с изображениями*/        
        #image_slider ul{
            padding: 0;
 
            /*Требуется для анимации,
             которая производится посредством
             изменения CSS-значений 'left' и 'right'*/
             position: relative;
             
             /*Задаются для того, чтобы при загрузке страницы и ДО
             срабатывания скрипта слайдера на пользователей
             не вываливался весь табун изображений, которые сворачиваются
             в слайдер только после того, как сработает плагин*/
             overflow: hidden; /**/
             height: 170px;
             
        }
            /*контейнер <li>, в нутри которого находится изображение*/
            #image_slider ul li{
                padding: 0;
                    overflow: hidden;
                display: block;
                float: left;
                width: 160px;
                height: 160px;
            }  
                /*Изображение*/
                #image_slider li img {
                        float: left; width: 150px;
                        display: inline; border: 1px solid #FFF;
                }
                /*Изображение при наведении мыши*/
                #image_slider li a:hover img {
                        border: 1px solid #DC2081;
                }

Смотрим результаты: http://www.zaisl.info/demo/slider/step2.html

Все выглядит вполне прилично, но как видим, никакого феерического действа по клику на кнопку “Вперед” не происходит. Самое время добавить анимацию в нашу свежеиспеченную мини-галерейку.

3. Инициализация плагина

• В файле с инициализациями, пишем следующее:

1
2
3
4
5
$( "#image_slider" ).accessNews({
headline : "Всего фотографий",
speed : "normal",
slideBy : 2
});

Как видим, плагин не блещет ассортиментом настроек и мне это ОЧЕНЬ и очень нравится. Какие же параметры оказались в нашем распоряжении?

headline – это тот текст, который будет находится рядом со ссылкой “развернуть/свернуть”
speed – скорость пролистывания изображений [fast/normal/slow]
slideBy – количество изображений, перелистываемых за раз

Наслаждаемся конечным результатом: http://www.zaisl.info/demo/slider/step3.html
PROFFIT!

Скачать исходники примера.(http://www.zaisl.info/demo/slider/slider.zip)

На этом всё, приятного вам скроллинга по жизни и прочих ништяков. :)