Как сделать ленту из фотографий

Как сделать ленту из фотографий

Как сделать ленту из фотографий

Как сделать ленту из фотографий

Что нам понадобится

  • jQuery
  • jcarousel lite
  • Изображения

И все. Где взять jQuery я думаю, все знают. А jcarousel Lite я нагуглил за вас. Я долго искал плагин, который позволит мне быстро и без проблем, без гигантских объемов кода и хитрых премудростей сделать такой простой эффект. И я нашел его и очень рад этому. Фактически, этот пост я пишу еще и для себя, как закладку, чтобы заглянуть сюда когда в следующий раз потребуется сделать галерею изображений с автоскроллом.

Пишем html для ленты изображений

Тут классика. Используем список ul и оборачиваем его в div. На этот див мы будем натравливать плагин, так что ему нужен идентификатор. В моем случае это класс.

<div class="mycarousel"> <ul> <li><img src="/img/sample/palm-s.png" alt="пальма"/></li> <li><img src="/img/sample/malinka-s.png" alt="малина"/></li> <li><img src="/img/sample/blue-sea-s.png" alt="Морько"/></li> <li><img src="/img/sample/4cherries-s.png" alt="Вишенки"/></li> <li><img src="/img/sample/palm-s.png" alt="пальма"/></li> <li><img src="/img/sample/malinka-s.png" alt="малина"/></li> <li><img src="/img/sample/blue-sea-s.png" alt="Морько"/></li> <li><img src="/img/sample/4cherries-s.png" alt="Вишенки"/></li> </ul> </div>

Важно чтобы изображения были одного размера. Иначе будет смотреться не так эффектно. Поэтому придется напрячься и обработать их.

Готовим JavaScript для карусели изображений

Нужно подключить jQuery. Как это сделать, думаю, все знают. А еще нужно подключить библиотеку jcarousel Lite. Она все и делает.

После загрузки страницы, нужно натравить плагин на нашу ленту изображений и произойдет чудо!

<script type='text/javascript' > $(function() { $(".mycarousel").jCarouselLite({ auto: 2000, speed: 1000, circular: true, visible: 4 }); }); </script>

Это все! Реально. Больше ничего не нужно. Не нужно подключать и настраивать темы. Не нужно делать какие-то контролы и писать дополнительный код. У вас есть стандартный код списка изображений и единственный вызов плагина с параметрами. Это так, как должно быть. Я в восторге, если честно.

О возможных параметрах и их значениях можно прочитать в оригинале на страничке плагина. Ну а я вкратце переведу вам что зачем.

Возможные параметры галереи

btnPrev - идентификатор, определяющий кнопку "Назад". Это нужно если вы делаете управление прокруткой с помощью кнопок.

btnNext - идентификатор для кнопки "Вперед".

btnGo - вы можете сделать переход по номерам элементов. При клике на какой-то элемент, карусель должна быть проскроллена на определенный итем. Подробнее написано в документации.

mouseWheel - true/false значение, определяющее будет ли карусель прокручиваться от скролла мышки. Требует плагин mousewheel.

auto - true/false значение, определяющее будет ли лента крутиться сама.

speed - скорость прокрутки в милисекундах.

easing - эффект прокрутки. Можно сделать эффект подпрыгивания. Требует плагина easing.

vertical - может нужно, чтобы картинки крутились вертикально?

circular - будет ли лента останавливаться по достижении последней картинки или будет крутиться по кругу?

visible - сколько элементов видно

start - с какого элемента начинать

scroll - по сколько элементов прокручивается

beforeStart - callBack функция, вызывающаяся до начала анимации

afterEnd - callBack функция, вызывающаяся в конце анимации

Такие дела. Пользуйтесь!

А я закончил конкурс на блоге фаната футболок и скоро напишу о нем отчет.

Понравилась статья? Поставь плюс один!

Теги: html JavaScript разработка


Источник: http://dayte2.com/jcarousellite


Как сделать ленту из фотографий

Как сделать ленту из фотографий

Как сделать ленту из фотографий

Как сделать ленту из фотографий

Как сделать ленту из фотографий

Как сделать ленту из фотографий

Как сделать ленту из фотографий