Галерея jCarouselLite с нумерацией страниц

Галерея jCarouselLite
Дата: 13 Декабря 2013, в 15:08
Рубрика: Вебмастерская
Просмотры: 8525

Галерея jCarouselLite предназначена для управления списком по вертикали и по горизонтали. Так же кроме управления списком можно использовать галерею для демонстрации контента.

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

И так опишем все по пунктам.

Что нам нужно для вывода jCarouselLite на сайте?

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

Теперь все пункты подробно

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

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

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

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

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

<script>
$(function() { $('.carousel').jCarouselLite(); }); </script>

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

<style type="text/css">
.carousel {
	float:left;
	width:600px;
	margin:0 0 10px;
}
.carousel li {
	float:left;
	width:495px;
	height:200px;
	list-style:none;
	margin:0 10px;
}
.carousel h3 {
	font-family:Georgia;
	font-size:20px;
	font-weight:400;
	line-height:25px;
	margin:0 0 15px;
}
.carousel h3 a {
	color:#b6b6b6;
	text-decoration:none;
}
.carousel h3 a:hover {
	color:#969696;
}
.carousel p {
	font-family:Tahoma;
	font-size:13px;
	color:#868686;
	line-height:18px;
}
.carousel img {
	float:left;
	width:200px;
	height:200px;
	margin:0 10px 0 0;
}
.prev, .next {
	display:block;
	float:left;
	width:42px;
	height:42px;
	margin:79px 0 0;
}
.prev {
	background:url(../img/prev_next.png) no-repeat;
}
.next {
	background:url(../img/prev_next.png) -44px 0 no-repeat;
}
.prev:hover {background-position:0 -44px;}
.next:hover {background-position:-44px -44px;}
.go {margin:0 0 0 52px;}
.go a {
	float:left;
	width:10px;
	height:11px;
	text-indent:-9999px;
	background:url(../img/go.png) no-repeat;
	margin:0 5px 0 0;
}
.go a:hover, .go .goActive {background-position:0 -11px;}
.clr {clear:both;}
</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 - Обратная функция начала показа, выполняется сразу же при перелистывании
  • afterEnd: null - Обратная функция конца показа, срабатывает сразу после завершения перелистывания

Значение "null" для переменной означает что его присутствие не обязательно и если потребуется то можно указать в вызове скрипта.

Переменная mouseWheel будет работать только тогда, когда переменная hoverPause выключена, то есть значение "false".

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

Вызов скрипта jCarouselLite с нужными параметрами на конкретном примере

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

Скрипт вызова галереи jCarouselLite

<script>
$(function() {
	$('.carousel').jCarouselLite({
		btnPrev: '.prev',
		btnNext: '.next',
		btnGo: ['.1', '.2', '.3'],
		auto: 3000,
		speed: 300,
		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>
	</ul>
</div>
<div class="next"></div>
<div class="clr"></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>
</div>

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

  • jquery.js - плагин jQuery
  • jcarousel.js - скрипт галереи
  • mousewheel.js - скрипт для перелистывания мышкой
  • easing.js - скрипт для анимации переходов
  • prev_next.png - картинка кнопок переходов "Вперед" и "Назад"
  • go.png - картинка кнопок для нумерации страниц
  • carousel.html - HTML документ где все это подключено
  • 01.jpg - 03.jpg - картинки для галереи
Скачать / Download [42.56k] Дата: 17-12-2013 Скачали: 441
1 2 3