Скрипт слайдшоу Twilight с оптимизацией для Айпада

Скачать

Замечательный скрипт слайдшоу для вашего сайта. Оформлен в виде плагина jQuery, поддерживает фотографии разной ширины, а главное — безупречно работает на iPhone и iPad за счет применения аппаратного ускорения. Особенности:

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

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

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

		<div class="twilight-show">
			<div class="twilight-box">
				<div><img src="pics/1.jpg" alt="" /></div>
				<div><img src="pics/2.jpg" alt="" /></div>
				<!-- ... -->
			</div>
			<div class="arrow-left"><img src="img/arrow-left.png" alt="" /></div>
			<div class="arrow-right"><img src="img/arrow-right.png" alt="" /></div>
		</div>

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

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

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

		$(window).load(function() {
			$('.twilight-show').twilight();
		});

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

Стили

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

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

В классе .twilight-show должна быть жестко задана высота и ширина слайдшоу, а также указан параметр overflow: hidden.

Чтобы скрыть уголки соседних слайдов, нужно установить ширину слайдшоу в классе .twilight-show четко равной ширине слайдов.

Параметры

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

		$(window).load(function() {
			$('.twilight-show').twilight({
				animSpeed: 1000,
				startingSlide: 5,
				updateURL: false
			});
		});

Теперь анимация будет длиться 1 секунду вместо половины, первым слайдом будет 5-й, а URL не будет обновляться при листании.

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

animTime Время смены слайдов в миллисекундах.

По умолчанию: 500
startingSlide Номер начального слайда. При значении ’url’ номер слайда определяется автоматически из URL.

По умолчанию: 0
updateURL Параметр определяет, следует ли обновлять URL страницы при смене слайда. Если параметр установлен в true, то к адресу страницы будет добавляться номер текущего слайда через знак #.

По умолчанию: true
outOpacity Прозрачность боковых слайдов.

По умолчанию: 0.5
overOpacity Прозрачность боковых слайдов при наведении мышкой на стрелочки навигации.

По умолчанию: 0.7
animFadeTime Время затемнения боковых слайдов при листании, мс.

По умолчанию: 500
animHoverTime Время затемнения боковых слайдов при наведении курсора мыши на стрелочки навигации, мс.

По умолчанию: 250
easingMargin Функция анимации для Margin-анимации. По умолчанию используется везде, кроме iPhone/iPad. Строка.

По умолчанию: ’linear’
easingCss Функция анимации для CSS-анимации. По умолчанию используется на iPhone/iPad. Строка.

По умолчанию: ’linear’
boxSelector Селектор бокса. Бокс — это контейнер внутри блока со слайдшоу, который обладает большой шириной и вмещает в себя все слайды. Строка.

По умолчанию: ’.twilight-show .twilight-box’
arrowLeftSelector Селектор стрелочки «влево». Строка.

По умолчанию: ’.twilight-show .arrow-left’
arrowRightSelector Селектор стрелочки «вправо». Строка.

По умолчанию: ’.twilight-show .arrow-right’
listenEvent Указывает, должно ли слайдшоу ожидать события twilight.

По умолчанию: true
forceCss Заставляет слайдшоу использовать CSS-анимацию всегда.

По умолчанию: false
showId Идентификатор слайдшоу. Используется в событии для управления слайдшоу, если их несколько на странице.

По умолчанию: false
slideCompleteCallback Callback-функция, которая будет вызвана при завершении смены слайдов.

По умолчанию: function(slideNumber, direction) { }
prevNextClickCallback Callback-функция, которая будет вызвана при нажатии на стрелочки навигации.

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

Событие перехода и пейджер

Слайдшоу Twilight слушает событие twilight и принимает из него параметры index и showId. Параметр index выступает в качестве номера слайда, на который нужно перейти. Параметр showId опредяляет идентификатор шоу, которое принимает событие, если слайдшоу несколько на странице. С помощью этого события можно заставить нужное слайдшоу перейти на указанный слайд.

Использование события продемонстрировано на странице слайдера jBond.

Декабрь 2012