Тестовая верстка
журнала для Айпада
Верстка сайта компании WMG-Group
Логотип и шаблоны сайта компании mySmarthouse
Сайт типографии
«Maximum print»
Логотип и сайт магазина «Little Big Shop»
Кабинет статистики сети «Реднет»
Интерфейс программы
«Money Checker»
Верстка книги для «Искателя»
Сайт военно-исторического центра «Искатель»
← Потяните мышью →
English Русский

Слайдер jBond

Его зовут Бонд. Джей Бонд.

Многофункциональный скрипт слайдера. Идеально подойдет для представления ваших продуктов или для пейджера слайдшоу. Управляется тасканием или наведением мыши. Безупречно работает на iPhone и iPad. Особенности:

Слайдер jBond работает на jQuery 1.4 и выше; поддерживает браузеры IE 7, Firefox 3.6, Safari 3, Chrome, Opera 9.5 и их старшие версии.

Режимы работы

Слайдер работает в трех режимах. Прокрутка по наведению мыши: (режим move)

Прокрутка по тасканию мышкой: (режим touchMargin)

Прокрутка по тасканию мышкой на CSS-анимации: (режим touchCss, поддерживается не всеми браузерами)

Слайдер сам распознает, если сайт просматривают с iPhone/iPad. Можно настроить слайдер так, чтобы на настольном компьютере использовался один режим, а в Mobile Safari — другой. Настольная версия jBond поддерживает режимы move, touchMargin и touchCss. Мобильная версия поддерживает touchMargin и touchCss. По умолчанию используется move для настольных браузеров и touchCss для мобильных устройств.

Рекомендуется использовать touchCss для мобильного режима, так как только при использовании CSS-анимации и аппаратного ускорения возможна идеально плавная анимация на iPhone и iPad.

Об управлении режимами читайте в разделе «Параметры».

Подключение и использование

HTML-код слайдера должен выглядеть так:

<div class="bond">
	<div class="bond-wrapper">
		<div class="bond-box">
			<div class="bond-slide">
				<img src="thumbs/1.jpg" alt="" />
			</div>
			<div class="bond-slide">
				<img src="thumbs/2.jpg" alt="" />
			</div>
			<div class="bond-slide">
				<img src="thumbs/3.jpg" alt="" />
			</div>
			<!-- ... -->
		</div>
	</div>
</div>
            

Код подключения jBond так: (XHTML 1.0 Strict)

<link rel="stylesheet" type="text/css" href="css/bond.css" />
<script type="text/javascript" src="js/bond.js"></script>
			

А код использования — так:

$(window).load(function() {
	$('.bond').bond();
});
            

Если вы используете $(document).ready(), вам необходимо вручную указать все размеры изображений.

Код и стили вертикального режима смотрите в примерах из архива скрипта.

Стили

Слайдер jBond не создает дополнительных элементов, а использует только заданную HTML-разметку и её CSS-стили.

В классе .bond-wrapper указаны параметры -webkit-transform и -webkit-transition. Они отвечают за анимацию на iPhone и iPad. Анимация в браузере Mobile Safari может работать некорректно (мерцать) без начальной установки этих свойств.

Параметры

Слайдер jBond можно настроить по вкусу, передав ему особые параметры. Например:

$(window).load(function() {
	$('.bond').bond({
		startPos: 1,

		desktopMode: 'touchMargin',
		slideClickCallback: function(N, delta) { alert(N); }
	});
});
            

Теперь слайдер будет запущен из правого края, будет использован режим таскания, а по клику на слайд будет выдаваться сообщение с номером слайда.

В таблице представлены все параметры слайдера.

orientation Определяет ориентацию слайдера: горизонтальную horz и вертикальную vert. Для использования вертикальной ориентации нужна иная разметка. В архив слайдера вложен пример использования вертикального режима. Строка.

По умолчанию: ’horz’

desktopMode Определяет режим работы слайдера в настольных браузерах: move устанавливает прокрутку по наведению, touchMargin устанавливает прокрутку по тасканию мышкой, touchCss устанавливает прокрутку по тасканию мышкой с использованием CSS-анимации. Строка.

По умолчанию: ’move’

mobileMode Определяет режим работы слайдера на iPhone/iPad: touchMargin устанавливает прокрутку по тасканию пальцем, touchCss устанавливает прокрутку по тасканию пальцем с использованием CSS-анимации. Строка.

По умолчанию: ’touchCss’

startPos Стартовая позиция слайдера. 0 — слева, 1 — справа, 2 — в центре. Работает для всех режимов.

По умолчанию: 0

restArea Ширина центральной области покоя для режима move в пикселях. Область покоя находится в центре слайдера. При наведении на область покоя мышью, слайдер не прокручивается ни влево, ни вправо.

По умолчанию: 6

maxSpeed Максимальная скорость прокрутки для режима move. Величина сдвига в пикселях за один такт прокрутки.

По умолчанию: 7

maxVelocity Максимальная скорость движения слайдера после броска мышью в режимах touchMargin и touchCss. Безразмерный коэффициент.

По умолчанию: 15

bounce Максимальная величина отскока при перетягивании слайдера через край. Для режимов touchMargin и touchCss. Безразмерный коэффициент.

По умолчанию: 5

timeScroll Время движения слайдера до полной остановки после броска мышью для режимов touchMargin и touchCss. Время в CSS-формате. Строка.

По умолчанию: ’3s’

timeBack Время анимации возврата слайдера после перетягивания за край для режимов touchMargin и touchCss. Время в CSS-формате. Строка.

По умолчанию: ’0.5s’

wrapperSelector Селектор враппера. Строка.

По умолчанию: ’.bond-wrapper’

boxSelector Селектор бокса. Строка.

По умолчанию: ’.bond-box’

slideSelector Селектор слайда. Строка.

По умолчанию: ’.bond-slide’

easingCss Функция анимации для режима touchCss. Строка.

По умолчанию: ’cubic-bezier(0,1,1,1)’

easingMargin Функция анимации для режима touchMargin. Строка.

По умолчанию: ’easeOutExpo’ (включена в комплект)

slideClickCallback Callback-функция, которая будет вызвана по нажатию на слайд. delta — длина пути, проделанного при скролле.

По умолчанию: function(slideNumber, delta) { }

Интеграция с Twilight и другими слайдшоу

Слайдер jBond можно легко использовать в качестве пейджера для слайдшоу. Параметр slideClickCallback принимает функцию, которая будет вызвана при клике на слайд внутри jBond. Функции первым аргументом передается номер нажатого слайда. Зная номер слайда, можно указать слайдшоу перейти на соответствующую фотографию.

В общем виде управление выглядит так:

$(window).load(function() {
	var slideshow = $('.super-mega-slideshow').SuperMegaSlideshow();
	$('.bond').bond({ slideClickCallback: function (N) {
		slideshow.goto(N, delta);
	}});
});
        	

Разумеется, для каждого слайдшоу формат управления свой и указан в документации к этому слайдшоу. В случае с Twilight Show код будет следующим:

$(window).load(function() {
	$(’.twilight’).twilight();
	$(’.bond’).bond({ slideClickCallback: function (N, delta) {
		$(document).trigger({
			type: ’twilight’,
			index: N
		});
	}});
});
        	
Декабрь 2012
Концепт: Андрей Маркелов
Программирование: Андрей Маркелов, Александр Борисов
Портфолио