Создание галереи jQuery при помощи z-index

Опубликовано: 31 Март 2011Автор ratemir

В этом уроке мы объединим свойство CSS, называемое z-index, с возможностями jQuery, для создания необычной фото галереи. С помощью z-index можно добиться очередности наложения слоёв друг на друга(например контейнеров div), в нашем случае в качестве примера будут использованы изображения. Ну а jQuery придаст всему этому визуальный эффект.

Создание галереи jQuery при помощи z-index

Займемся подготовкой разметки HTML

<!-- relevant for the tutorial - start -->
<div class="grid_6 prefix_1 suffix_1" id="gallery">
  <div id="pictures">
    <img src="images/picture1.png" alt="" />
    <img src="images/picture2.png" alt="" />
    <img src="images/picture3.png" alt="" />
    <img src="images/picture4.png" alt="" />
    <img src="images/picture5.png" alt="" />
  </div>
 
  <div class="grid_3 alpha" id="prev">
    <a href="#previous">« Previous Picture</a>
  </div>
  <div class="grid_3 omega" id="next">
    <a href="#next">Next Picture »</a>
  </div>
</div>
<!-- relevant for the tutorial - end -->

Мы создали главный контейнер <div> в котором расположили контейнер для фотографий и два элемента управления(«предыдущее» и «следующее» фото) для передвижения фотографий. Мы можем добавить любое количество фотографий, как мы хотим, так как по нашему сценарию картинки будут автоматически уложены поочередно и появление того или иного изображения на первом плане осуществляется динамически.

Вот CSS код для нашей галереи:

/* relevant for the tutorial - start */
#gallery { position: relative; }
  #pictures { position: relative; height: 408px; }
  #pictures img { position: absolute; top: 0; left: 0; }
 
  #prev, #next { margin-top: 30px; text-align: center; font-size: 2.0em; }
/* relevant for the tutorial - end */

Как видите контейнер для фотографий(#pictures) имеет относительное(relative) положение и значение высоты(height) картинки. Самим же фото внутри контейнера, тем что с тегом <img>, присвоено абсолютное(absolute) позиционирование и теперь когда их отступы от верхнего левого угла вышестоящего <div> равны нулю, то они накладываются друг на друга. Таким образом, последняя картинка под номером «5» (в HTML разметке) на экране монитора окажется поверх остальных, а первая «1» расположится на последней позиции.

В примере галереи, были использованы изображения PNG, все они являются прозрачными и имеют одинаковую высоту и ширину. Чтобы создать эффект неопрятной кучи фотографий, каждая картинка имеет гладкую тень и повёрнута на определённый угол. Сделано это вручную с помощью Photoshop.

Принцип изменения Z-индекса

Z-индекс указывает местоположение фотографии, то есть на 1,2,3 и т.д. месте. Далее нам необходимо поменять их местами и тем самым поменять положение, например картинку №2 на №1, при этом остальные фото так же изменят позицию на одну единицу, то есть бывшая третья станет второй и т.д. Всё это осуществляется посредством скрипта.

$(document).ready(function() { //perform actions when DOM is ready
  var z = 0; //for setting the initial z-index's
  var inAnimation = false; //flag for testing if we are in a animation
 
  $('#pictures img').each(function() { //set the initial z-index's
    z++; //at the end we have the highest z-index value stored in the z variable
    $(this).css('z-index', z); //apply increased z-index to <img>
  });
 
  function swapFirstLast(isFirst) {
    if(inAnimation) return false; //if already swapping pictures just return
    else inAnimation = true; //set the flag that we process a image
 
    var processZindex, direction, newZindex, inDeCrease; //change for previous or next image
 
    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action
 
    $('#pictures img').each(function() { //process each image
      if($(this).css('z-index') == processZindex) { //if its the image we need to process
        $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
          $(this).css('z-index', newZindex) //set new z-index
            .animate({ 'top' : '0' }, 'slow', function() { //animate the image back to its original position
              inAnimation = false; //reset the flag
            });
        });
      } else { //not the image we need to process, only in/de-crease z-index
        $(this).animate({ 'top' : '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery
          $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
        });
      }
    });
 
    return false; //don't follow the clicked link
  }
 
  $('#next a').click(function() {
    return swapFirstLast(true); //swap first image to last position
  });
 
  $('#prev a').click(function() {
    return swapFirstLast(false); //swap last image to first position
  });
});

Давайте теперь разложим данный скрипт на куски и разберём кто за что отвечает.

$('#pictures img').each(function() { //set the initial z-index's
  z++; //at the end we have the highest z-index value stored in the z variable
  $(this).css('z-index', z); //apply increased z-index to <img>
});

Вы наверное заметили, что атрибута z-index, ни в разметке html, ни в CSS нет. В нашем примере он устанавливается при помощи jQuery. После окончания цикла всем тегам IMG в контейнере фотографий присваивается порядковый номер и соответствующее Z-значение индекса в переменной z.

function swapFirstLast(isFirst) {

Мы используем одну и ту же функцию для кнопок «предыдущий» и «следующий» шаг, так как они делают в принципе одно и то же.

if(inAnimation) return false; //if already swapping pictures just return
else inAnimation = true; //set the flag that we process a image

Для нас главное, чтобы происходил сдвиг лишь одной фотографии за клик. Переменная inAnimation определяет состояние процесса анимации. Если картинка находится в движении, то её нужно возвратить в исходное положение(заданное нами в CSS top: 0; left: 0;). Если это не так, то анимация наоборот приходит в действие при клике.

var processZindex, direction, newZindex, inDeCrease; //change for previous or next image
 
if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action
else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action

Так как мы используем одну функцию для двух процессов, мы должны установить необходимые переменные.

processZindex — это положение фото, которое скрипт должен обработать, либо рисунок будет находиться на переднем плане, либо на заднем.

direction — где картинка будет «оживать». Имеется ввиду под кучей фотографий (-) или наоборот.

newZindex будет присвоен картинкам в соответствии их расположения. (1) для последней позиции и самое высокое значение Z-индекс для первой.

переменная inDeCrease говорит, остальным фотографиям об увеличении(+1) или уменьшении(-1) Z-индекса на одну позицию

$('#pictures img').each(function() { //process each image

Происходит проверка Z-индекса всех изображений и его замена

if($(this).css('z-index') == processZindex) { //if its the image we need to process
  $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
    $(this).css('z-index', newZindex) //set new z-index
      .animate({ 'top' : '0' }, 'slow', function() { //animate the image back to its original position
        inAnimation = false; //reset the flag
      });
  });
}

Проверяется какое изображение должно изменить своё положение(первое или последнее). Когда всё решено, мы идем дальше и оживляем фотографию, либо над или под остальной кучей фоток. После завершения этого, устанавливается новый Z-индекс для изображениий и всё возвращается в исходное положение.

else { //not the image we need to process, only in/de-crease z-index
  $(this).animate({ 'top' : '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery
    $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
  });
}

Здесь мы заканчиваем с элементами управления «предыдущий» и «следующий». Во время работы скрипта клики по ссылкам блокируются.

Заключение

Итак мы создали приятную глазу галерею с помощью нескольких строк кода. Конечно, она может быть расширена добавлением новых функций(например, выборочный контроль фотографий, показ случайных позиции каждый раз и т.д.), но зато Вы получили представление о том, как совместить CSS и собственно магию JQuery. Меняйте код по Вашим потребностям и было бы совсем замечательно, если эти изменения стали доступны в комментариях.

Метки: Рубрика: Технологии jQuery


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

Оставить комментарий

Наверх