Чудо галерея на jQuery

Чудо галерея на jQuery

В интернете полно статей про всевозможные галереи, полно описаний, примеров, аж глаза разбегаются. Я не буду рассказывать про все галереи, я не буду показывать их функционал.  Я расскажу про один замечательный плагин галереи на 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
  });
});

Все что идет после // – это комментарий. Обращу внимание, что после значения свойства необходимо ставить запятую. После последнего свойства, ставить запятую не надо.

И как всегда ссылка на скачивание исходного кода галереи.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *