Галерея в виде стопки фотографий
В данном уроке мы скомбинируем свойство CSS ‘z-index’ и мощь jQuery для создания галереи с замечательным эффектом перехода между слайдами (перебор стопки фотографий).
Введение
В данном уроке мы будем создавать отличную галерею с использованием свойства CSS z-index. В нашем примере будет выводиться стопка фотографий, слайды будут меняться в зависимости от направления просмотра "первый на последний" или "последний на первый". При этом будет изменяться значение свойства z-index и, конечно же, будет использоваться анимация перемещений для создания эффекта перебора стопки фотографий.
Подготовка HTML, CSS и изображений
HTML
Мы используем пару контейнеров для простенького оформления слайдшоу, контейнер pictures для изображений и две ссылки для переключения к предыдущему и следующему изображениям.
Можно добавить столько изображений, сколько хочется, потому что скрипт динамически будет обрабатывать все перечисленные изображения.
CSS
#slideShowContainer{
width:510px;
height:510px;
position:relative;
margin:120px auto 50px;
}
#slideShow{
position:absolute;
height:490px;
width:490px;
background-color:#fff;
margin:10px 0 0 10px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#pictures { position: relative; height: 408px; }
#pictures img { position: absolute; top: 0; left: 0; margin: 36px 0 0 10px;}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('../img/arrows.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}
#previousLink{
left:-38px;
}
#previousLink:hover{
background-position:bottom left;
}
a#nextLink{
right:-38px;
background-position:top right;
}
#nextLink:hover{
background-position:bottom right;
}
Контейнер pictures позиционируется относительно и имеет высоту равную высоте изображения. Изображения внутри данного контейнера позиционируются абсолютно, что в сочетании с установленными свойствами top: 0; left: 0; приводит к тому, что они накладываются друг на друга. Последнее изображение (5) будет располагаться сверху, а первое (1) - внизу.
Изображения
В нашем примере используются изображения в формате PNG с прозрачностью. Они имеют одинаковую высоту и ширину. Для создания эффекта стопки каждое изображение имеет тень и немного повернуто вокруг центра в разных направлениях. Они подготовлены вручную в Фотошопе. Если у вас есть желание делать такую подготовку на сервере в автоматическом режиме, то вам поможет скрипт Image Magick, или можно воспользоваться тегом сanvas.
Принцип изменения z-index
Свойство z-index представляет положение изображения. 1 - это нижнее положение, а 5 (так как в примере используется 5 изображений) - верхнее положение.
При переключении на следующий слайд мы будем помещать верхнее изображение вниз, что означает установку значения свойства z-index равным 1. Для всех остальных изображений значение свойства z-index должно быть увеличено на 1. Изображение, которое находилось под верхним (4), само станет верхним и так далее.
При переключении на предыдущий слайд для самого нижнего изображения свойство z-index изменит значение с 1 на 5. Для всех остальных изображений значение свойства z-index нужно уменьшить на 1. Бывшее верхнее изображение (5) перейдет на предыдущую позицию (4) и так далее.
JavaScript
// Действия выполняются после загрузки DOM
$(document).ready(function() {
var z = 0; // Переменная для хранения значения свойства z-index
var inAnimation = false; // Флаг, сигнализирующий о выполнении анимации
$('#pictures img').each(function() { // Устанавливаем начальные значения свойства z-index
z++; // В переменной будет храниться максимальное значение свойства z-index
$(this).css('z-index', z); // Присваиваем увеличенное значение свойства z-index для ![]()
});
function swapFirstLast(isFirst) {
if(inAnimation) return false;
else inAnimation = true;
var processZindex, direction, newZindex, inDeCrease;
if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; }
else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }
$('#pictures img').each(function() { // Цикл по всем изображениям
if($(this).css('z-index') == processZindex) {
$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() {
$(this).css('z-index', newZindex)
.animate({ 'top' : '0' }, 'slow', function() {
inAnimation = false;
});
});
} else {
$(this).animate({ 'top' : '0' }, 'slow', function() {
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
значение свойства z-index
});
}
});
return false; // Прерываем дальнейшую обработку события
}
$('#previousLink').click(function() {
return swapFirstLast(false);
});
$('#nextLink').click(function() {
return swapFirstLast(true);
});
});
Рассмотрим код более подробно.
$('#pictures img').each(function() {
z++;
$(this).css('z-index', z);
});
Начальные значения свойств z-index не устанавливаются ни в разметке HTML, ни в CSS. Поэтому мы используем jQuery для инициализации значений. Используется порядок, определенный разметкой. После завершения цикла по всем изображениям в контейнере pictures у нас есть количество изображений и максимальное значение свойства z-index, которое хранится в переменной z.
function swapFirstLast(isFirst) {
Для действия по переходу к предыдущему или следующему слайду будет использоваться одна и та же функция, так как они схожи по своему алгоритму.
if(inAnimation) return false; else inAnimation = true;
Будем обрабатывать только одно изображение одновременно. Флаг inAnimation определяет выполнение процесса. Если какое-то изображение уже обрабатывается, то просто завершаем обработчик события без каких-либо действий, а если нет - то устанавливаем флаг и производим смену слайдов.
var processZindex, direction, newZindex, inDeCrease; // Переменные для технических нужд
if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; }
else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }
Так как одна функция используется для выполнения различных действий, то нужно определить несколько переменных, в которых будут храниться соответствующие действию значения. processZindex определяет позицию, которую надо обработать - это первое или последнее изображение в стопке. direction хранит указание на направление, в котором производится передвижение слайдов - либо выше, либо ниже (-) стопки. newZindex хранит устанавливаемое значение для свойства z-index - 1 для последнего изображения и максимальное значение свойства z-index для первой позиции. inDeCrease хранит величину, на которую изменяется значение свойства z-index всех остальных изображений (+1 или-1).
$('#pictures img').each(function() { // Цикл по всем изображениям
Мы будем проходить по всем изображениям для изменения значения свойства z-index.
if($(this).css('z-index') == processZindex) { // Проверяем, нужно ли обрабатывать изображение
$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() {
$(this).css('z-index', newZindex) // Устанавливаем новое значение свойства z-index
.animate({ 'top' : '0' }, 'slow', function() {
inAnimation = false; // Сбрасываем флаг
});
});
} else { // Нет изображений для обработки, нужно только увеличить/уменьшить значение свойства z-index
$(this).animate({ 'top' : '0' }, 'slow', function() {
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
});
}
Если изображение нужно обработать (то есть это либо верхнее, либо нижнее изображение), то переходим к анимации перемещения картинки над или под стопкой. Когда анимация закончена, то устанавливаем новое значение свойства z-index и выполняем анимацию движения изображения обратно на свое место. После завершения анимации сбрасываем флаг inAnimation.
return false; // Прерываем дальнейшую обработку события
}
$('#previousLink').click(function() {
return swapFirstLast(false); // Переводим первое изображение на последнюю позицию
});
$('#nextLink').click(function() {
return swapFirstLast(true); // Переводим последнее изображение на первую позицию
});
});
Наша функция всегда возвращает false. Так она устанавливается в качестве обработчика события click для элементов управления галереей, то возвращаемое значение false прерывает дальнейшую обработку события элементами структуры DOM.
Заключение
Сочетание свойств CSS и мощности jQuery позволяет создавать замечательные эффекты с использованием всего нескольких строк кода. Рассмотренная галерея может быть улучшена добавлением различных функций (случайным сдвигом во время смещения изображения, выборка изображения из стопки случайным образом и так далее). Никаких ограничений для выполнения задуманного просто нет.
Источник урока: usejquery.com/posts/3/create-a-unique-gallery-by-using-z-index-and-jquery
