Галерея в виде стопки фотографий
В данном уроке мы скомбинируем свойство 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