screen-roller

jQuery-плагин для полноэкранного просмотра слайдов с возможностью переключения в стандартый режим отображения сайта (для маленьких экранов).

Подключение

<script src="screen-roller.js"></script> <link href="screen-roller.css" rel="stylesheet">

Структура HTML

<div style="width: 100%; height: 100%; position: absolute;">	 	<div class="roller"> 		<div class="screen">Содержимое слайда</div> 		<div class="screen">Содержимое слайда</div> 		<div class="screen">Содержимое слайда</div> 	</div> </div>

Использование

$('.roller').screenroller( 	{ 		modules: { 			keyboard: { 				next: [83], prev: [87] 			}, 			hash: true, 			'simple-page': { 				minWidth: 700, 				minHeight: 400 			} 		} 	} );

Параметры инициализации:

• speed: (по умолчанию 500) скорость анимации
• axis: (по умолчанию y) направление анимации
• modules: список модулей, которые будут проинициализированы. По умолчанию параметр modules имеет следующее вид:

{ 	'slide-animation': true,     touch: {     	mouseEmulate: true     },     wheel: true,     keyboard: {         next: [ 34, 40 ],         prev: [ 33, 38 ],         last: [ 35 ],         first: [ 36 ]     },     hash: false,     menu: false,     'simple-page': false }

Модули

Вся функциональность плагина основана на его модулях. Каждый модуль отвечает за выполнение небольшой задачи (обработка событий колеса мыши, обработка тач-событий и т.д.).

Инициализация модулей

Для инициализации модуля необходимо добавить его название (со значением true или {}, либо с набором опций) в список модулей при вызове метода screenroller. Большинство модулей будут инициализироваться по умолчанию. Для отмены инициальзации необходимо указать значение false для имени модуля.

$('.roller').screenroller( 	{ 		modules: { 			keyboard: false, //отменяем инициализацию модуля (по умолчанию модуль инициализируется) 			hash: true, //инициализируем модуль (по умолчанию модель не инициализируется) 			'simple-page': { // инициализируем модуль c набором параметров  				minWidth: 500, 				minHeight: 700 			} 		} 	} );

Методы и свойства модуля

У каждого модуля есть стандартный набор методов:

• enable - включить модуль
• disable - выключить модуль
• destruct - удалить модуль

А также стандартное свойство:

• enabled (true или false) - хранит переменную состояния включен или выключен

Некоторые модули могут именть дополнительные наборы методов и свойств

####Например

var roller = $('.roller').screenroller().roller  console.log(roller.modules) // список всех проинециализированных модулей console.log(roller.modules.keyboard) // содержимое модуля keyboard console.log(roller.modules.keyboard.enabled) // true = модуль включен console.log(roller.modules.keyboard.disable()) // выключаем модуль keyboard console.log(roller.modules.keyboard.enabled) // false = модуль отключен console.log(roller.modules.keyboard.enable()) // включаем  модуль keyboard console.log(roller.modules.keyboard.destruct()) // удаляем  модуль keyboard undefined console.log(roller.modules.keyboard) // undefined - модуль был удален 

slide-animation (по умолчанию включен)

Отвечает за анимированные переходы между слайдами

simple-page (по умолчанию отключен)

Отвечает за переход в режим обычной страницы, когда размеры роллера становятся меньше заданных. У данного модуля есть свой обработчик события resize, который включает и выключает модуль в зависимости от размеров роллера.

Свойства:

• watching: хранит переменную состояния включен или выключен слушатель события resize

Методы:

• offWatching: отключает слушателя события resize
• onWatching: включает слушателя события resize

Опции инициализации:

• minWidth:(по умолчанию 700) минимальная ширина при которой включается режим "simple-page"
• minHeight:(по умолчанию 700) минимальная высота при которой включается режим "simple-page"

keyboard (по умолчанию включен)

Отвечает за переключение слайдов при помощи клавиатуры

Опции инициализации:

• next: (по умолчанию [ 34, 40 ]) список кнопок для перехода к следующему слайду
• prev: (по умолчанию [ 33, 38 ]) список кнопок для перехода к предыдущему слайду
• last: (по умолчанию [ 35 ]) список кнопок для перехода к последнему слайду
• first: (по умолчанию [ 36 ]) список кнопок для перехода к первому слайду

touch (по умолчанию включен)

Отвечает за обработку touch-событий

Опции инициализации:

• mouseEmulate: (по умолчанию true) эмуляция touch-событий при помощи мыши

wheel (по умолчанию включен)

Отвечает за переключение слайдов при помощи колеса мыши

hash (по умолчанию отключен)

Отвечает за работу hash-навигации. Для правильной работы необходимо к слайдам добавлять атрибут data-hash

Пример:

<div style="width: 100%; height: 100%; position: absolute;">	 	<div class="roller"> 		<div class="screen" data-hash="first">Содержимое слайда</div> 		<div class="screen" data-hash="second">Содержимое слайда</div> 		<div class="screen" data-hash="third">Содержимое слайда</div> 	</div> </div>

Свойства:

• screensHash: список соответствия хеш-значений с позицией слайда

menu (по умолчанию отключен)

Отвечает за переключение слайдов при помощи меню

Опции инициализации:

• items: jQuery-объект со списком элементов меню $('.menu li')

Пример:

<div style="width: 100%; height: 100%; position: absolute;">	 	<div class="roller"> 		<div class="screen">Содержимое слайда</div> 		<div class="screen">Содержимое слайда</div> 		<div class="screen">Содержимое слайда</div> 	</div> </div> <ul class="menu"> 	<li>1</li> 	<li>2</li> 	<li>3</li> </ul>  <script> $('.roller').screenroller({ 	modules: { 		menu: { 			items: $('.menu li') 		} 	} });	 </script>

События

В зависимости от включенных модулей проиницилизированный jQuery-объект может генерировать следующие события:

• move-screen: смена текущего слайда
• module-has-turned-on: включение модуля
• touch-start: внутренне событие touch-start
• touch-move: touch-move
• touch-end: touch-end
• touch-cansel: touch-cansel
• restore-offset: restore-offset (анимация к текущему слайду)
• finished-animation: окончание анимации
• request-move: инициализация модулем смены текущего слайда

Пример

var $roller = $('.roller').screenroller();  $roller.on('move-screen', function(e, data) {     console.log(data); });  $roller.on('finished-animation', function(e, data) {     console.log(data); });

Методы

• moveTo(direction, [speed]): скроллим к следующему слайду

Пример

var $roller = $('.roller').screenroller();  $roller.moveTo('next'); // скроллим к следующему слайду (скорость анимации 0) $roller.moveTo('prev', 500); // скроллим к предыдущему слайду (скорость анимации 500) $roller.moveTo(4, 100); // скроллим к слайду с индексом "4" (скорость анимации 100)