Скрипт-ползунок jBond с оптимизацией для Айпада
Свадебного репортера
Свадебного репортера
«Maximum print»
Его зовут Бонд. Джей Бонд.
Многофункциональный скрипт слайдера. Идеально подойдет для представления ваших продуктов или для пейджера слайдшоу. Управляется тасканием или наведением мыши. Безупречно работает на iPhone и iPad. Особенности:
- Не тормозит на iPhone и iPad;
- Прокрутка по наведению мыши или по тасканию;
- Поддержка вертикального и горизонтального режимов;
- Поддержка CSS-анимации;
- Возможность настройки активной области, максимальной скорости и т. д.;
- Передача номера слайда через URL;
- Использование callbacks, событий и селекторов.
Слайдер 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 }); }}); });