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

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

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

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

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

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

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

Проверено в:

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

Что качать?

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

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

<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>

Вывод

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

Материал