В интернете полно статей про всевозможные галереи, полно описаний, примеров, аж глаза разбегаются. Я не буду рассказывать про все галереи, я не буду показывать их функционал. Я расскажу про один замечательный плагин галереи на jQuery в котором есть абсолютно все, что может только понадобится. Он вам поможет сделать отличную, кроссбразуерную галерею. Ничего лучше я просто не встречал. Эту библиотеку можно использовать не только для перелистывания изображений, но и для перелистывания блоков с контентом. Плагин размером 5кб может выполнять все что нужно для галереи и сейчас мы рассмотрим весь функционал галереи.
jcarousellite_1.0.1.js – основной файл галереи, весит 5кб, но при желании можно ужать до 2кб.
easing.js – файл эффекта при перелистывании. Если есть желание, можно написать свою формулу перелистывания галереи, ничего сложного нет.
mousewheel.js – файл необходим для прокрутки галереи с помощью колесика мышки.
Объявляется галерея очень просто:
$(function() { $(".carousel").jCarouselLite({ btnNext: ".next", //Кнопка вперед btnPrev: ".prev", //Кнопка назад speed: 1500 //Скорость }); });
И далее в блоке с классом .carousel мы вставляем список с картинками:
<table style="margin:0 auto; background-color:#1c1c1c;" width="750px"> <tr> <td width="25px"><a href="#" class="next"><img border="0" src="images/1_2.jpg"/></a></td> <td> <div class="carousel"> <ul> <li class="ul_gall" ><img width="270" height="133" border="0" style="margin:5px;" alt="1" src="images/1.jpg"></li> <li ><img width="270" height="133" border="0" style="margin:5px;" alt="2" src="images/2.jpg"></li> <li ><img width="270" height="133" border="0" style="margin:5px;" alt="3" src="images/3.jpg"></li> <li ><img width="270" height="133" border="0" style="margin:5px;" alt="4" src="images/4.jpg"></li> </ul> </div> </td> <td width="25px"><a href="#" class="prev"><img border="0" src="images/2_2.jpg"/></a></td> </tr> </table>
Все очень просто, и теперь галерея у нас готова. Так же мы не забыли про кнопки веред и назад с соответствующими классами .next и .prev.
А теперь рассмотрим все свойства галереи.
btnNext – string – пишется класс или идентификатор кнопки next (Вперед)
btnPrev – string – пишется класс или идентификатор кнопки prev (Назад)
auto – int – скорость автоматического перелистывания галереи в мс.
easing – string – эффект перелистывания, работает только с библиотекой easing.js. Может принимать следующие значения: expoinout, expoout, easeinout, easeout, easein, expoin, bouncein, bounceout, bounceinout, elasin, elasout, elasinout, backin, backout, backinout.
visible – int – количество отображаемых картинок.
start – int – с какой картинки начинать показывать галерею при загрузке страницы.
speed – int – скорость перелистывания галереи в мс.
scroll – int – количество пролистываемых картинок.
circular – boolean– галлерея цикличная (true), имеет конец.
mouseWheel — boolean – перелистывание галереи колесиком мышки, работает только с подключенной библиотекой mousewheel.js
vertical – boolean – включает вертикальную галерею, по умолчанию горизонтальная.
beforeStart – function – выполняется при начале прокрутки.
afterEnd – function – выполняется по завершению прокрутки.
Все свойства рассмотрели, теперь для новичков, приведу пример как ими пользоваться.
$(function() { $(".carousel").jCarouselLite({ btnNext: ".next", //Кнопка вперед btnPrev: ".prev", //Кнопка назад //auto: 800, // Время через которое галлерея автоматически прокрутится easing: "bounceinout", //Дергающийся эффект, необходим easing.js (expoinout, expoout, easeinout, easeout, easein, expoin, bouncein, bounceout, bounceinout, elasin, elasout, elasinout, backin, backout, backinout) visible: 3, // Количество отображаемых эллементов //start: 1, //С какой начинать показывать speed: 1500, //Скорость пролистывания //Обратная функция начала показа, выполняется сразу же при перелистывании //beforeStart: function(a) { //alert("Before animation starts:" + a); //}, //Обратная функция конца показа, срабатывает сразу после заверешния перелистывания //afterEnd: function(a) { // alert("After animation ends:" + a); //}, scroll: 2, //Сколько прокручивает за одно нажатие //circular: false, //Отключает цикл, по умолчнию включен //vertical: true, //Включает вертикальное отображение, по умолчанию горизонтальная mouseWheel: true //Включает проерутку колесиком мышки, необходим mousewheel.js }); });
Все что идет после // – это комментарий. Обращу внимание, что после значения свойства необходимо ставить запятую. После последнего свойства, ставить запятую не надо.
И как всегда ссылка на скачивание исходного кода галереи.