Плагин jQuery - Grid Navigation

Представляем вам плагин для организации навигации на основе галереи миниатюр. Имеется 10 вариантов переключения между страницами и реакция на прокручивание колесика мыши.

Сеточная навигация

Как использовать

Плагин использует следующую разметку HTML кода: 

<div id="tj_container" class="tj_container">
	<div class="tj_nav">
		<span id="tj_prev" class="tj_prev">Дальше</span>
		<span id="tj_next" class="tj_next">Назад</span>
	</div>
	<div class="tj_wrapper">
		<ul class="tj_gallery">
			<li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
			...

		 </ul>
	</div>
</div>

Затем вызываем плагин с параметрами (в примере кода представлены значения по умолчанию):

$('#tj_container').gridnav({
	rows	: 2,
	navL	: '#tj_prev',
	navR	: '#tj_next',
	type	: {
		mode		: 'def',
		speed		: 500,
		easing		: 'jswing',
		factor		: 50,
		reverse		: false
	}
});
rows
количество строк в сетке
navL, navR
селекторы элементов навигации для переключения на страницу вперед и назад
mode
тип анимации, можно исопльзовать следующие значения: def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
speed
скорость анимации для типов fade | seqfade | updown | sequpdown | showhide | disperse | rows
easing
эффект перехода для типов fade | seqfade | updown | sequpdown | showhide | disperse | rows
factor
задержка между последовательными анимациями для типов seqfade | sequpdown; выражается в количестве пикселей строки, пропускаемых перед началом следующей анимации
reverse
изменение порядка выполнения перехода для режима sequpdown

Смотрите примеры использования в архиве с исходным кодом.

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

^ Наверх ^