Spacegallery — эффектная 3D галерея

Автор: Александр и Татьяна Головко Дата публикации:

Не так давно повстречал на просторах Сети интересную галерейку под названием Spacegallery. Фотографии в ней сменяются с красивым 3D эффектом. Но, к сожалению, галерея не лишена недостатков.

Основное, что не понравилось — смена картинки происходит при клике на любую точку галереи. То есть, нажать на саму картинку и рассмотреть, например, ее увеличенное изображение нереально — галерея просто перелистнется на следующий кадр.

Пришлось взять свой старый боевой напильник и немного подправить плагин. Теперь Spacegallery снабжена отдельной кнопкой перемотки.

Демо-пример.

Проверено в:

IE 6-8
Firefox 3+
Opera 9.5-10
Safari 4
Chrome

Что качать?

библиотеку jquery качаем или подключаем из хранилища.
(6.56 Kb) галерея.
(0.60 Kb), (7.13 Kb) — вспомогательные библиотеки.
(0.22 Kb) стили для галереи.

Быстрый старт

Подключаем библиотеки и таблицу стилей:

<link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/spacegallery.js"></script>

Основа галереи — div с class="spacegallery", содержащий в себе отдельные a (или непостредственно img), которые станут слайдами. Также используем button с id="btnNext" для кнопки управления.

<div id="myGallery" class="spacegallery">
	<a href="#"><img src="images/bw3.jpg" alt="" /></a>
	<a href="#"><img src="images/lights3.jpg" alt="" /></a>
	<a href="#"><img src="images/bw2.jpg" alt="" /></a>
	<a href="#"><img src="images/lights2.jpg" alt="" /></a>
	<a href="#"><img src="images/bw1.jpg" alt="" /></a>
	<a href="#"><img src="images/lights1.jpg" alt="" /></a>
	<button id="btnNext">Вперед!</button>
</div>

Инициализируем галерею:

<script type="text/javascript">
jQuery(function(){
	jQuery('#myGallery').spacegallery();
});
</script>

Вот собственно и все.

А теперь подробнее

При инициализации, можно передавать следующие параметры:

Параметры spacegallery()

Название параметра	Описание	Тип	значение по умолчанию
border	Граница картинки.	integer	0
duration	Длительность анимации.	integer	800
perspective	Высота перспективы.	integer	140
minScale	Минимальный масштаб заднего изображения.	float	0.2
loadingClass	CSS класс применяемый к элементу в то время как загружается изображение.	string	null
before	Функция обратного вызова срабатывает перед тем, как перейти к следующему изображению.	function
after	Функция обратного вызова срабатывает после перехода к следующему изображению.	function
btnNext	Селектор кнопки управления.	string	#btnNext

Пример инициализации с параметрами

Предназначаем кнопку управления и задаем длительность анимации и высоту перспективы:

<script type="text/javascript">
jQuery(function(){
	jQuery("#flsGallery").flsGallery(
		btnNext: ".next",
		duration: 1500,
		perspective: 250
	);
});
</script>

Вывод

После небольшой доработки получилась вполне функциональная галерейка. Конечно, в идеале, нужно бы еще приделать к ней кнопку для перелистывания в обратную сторону.

Материал

Spacegallery - jQuery plugin

Xiper