главная

Теги:


Галерея в виде стопки фотографий

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

Урок Создан:2011-02-08 Просмотров:4590

Добавить комментарий:


Copyright© 2009 Hosted by Zhost