Фотографии Станислава Савина

English Русский

Слайдшоу 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
Концепт: Андрей Маркелов
Программирование: Александр Борисов
Портфолио