Стильная галерея для портфолио

Сегодня мы создадим навигационное портфолио шаблона с помощью jQuery. Идея заключается в следующем: требуется показать некоторые элементы в портфолио сгруппированными и перемещаться по ним горизонтально или вертикально. Для перемещения будут использоваться стрелки или небольшие блоки ниже текущего изображения.

Разметка

Для разметки нам потребуется основной контейнер с фоном, в котором будут стрелки и галерея с изображениями:

<section id="portfolio" class="portfolio">
 <div id="background" class="portfolio-background"></div>		
 <nav class="portfolio-arrows">
   <a href="#" class="up">Верх</a>
   <a href="#" class="down">Вниз</a>
   <a href="#" class="prev">Предыдущая</a>
   <a href="#" class="next">Следующая</a>
 </nav>
 <section class="portfolio-gallery">
   <div class="portfolio-gallery-inside">
      <div class="item">
         <div><img src="images/1.jpg" alt="image1" /></div>
         <div><img src="images/2.jpg" alt="image2" /></div>
         <div><img src="images/3.jpg" alt="image3" /></div>
      </div>
      <div class="item">
         <div><img src="images/4.jpg" alt="image4" /></div>
         <div><img src="images/5.jpg" alt="image5" /></div>
      </div>
      <div class="item">
         <div><img src="images/6.jpg" alt="image6" /></div>
         <div><img src="images/7.jpg" alt="image7" /></div>
				...
      </div>
      <div class="item">
				...
      </div>
   </div>
 </section>
</section>

CSS

Сперва, давайте определим стили для основного контейнера. Для центрирования контейнера воспользуемся старым добрым методом, применяемым в случае, когда размеры центрируемого элемента известны:

.portfolio {
   position:fixed;
   top:50%;
   left:50%;
   z-index:1;
   width:1000px;
   height:500px;
   margin:-250px 0 0 -500px;
}

Фон также будет фиксированным, кроме того, мы добавим фоновое изображение, которое не будет отвлекать внимание от центра:

.portfolio-background {
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   z-index:2;
   background:url(../images/bg.png) no-repeat 50% 50%;
}

Галерее будет задан параметр абсолютного позиционирования, а также и ее внутренний div с классом .portfolio-gallery-inside:

.portfolio-gallery,
.portfolio-gallery-inside {
   position:absolute;
   top:0;
   left:0;
}

Галерея будет занимать все пространство портфолио:

.portfolio-gallery {
   width:100%;
   height:100%;
   overflow:hidden;
}

Мы фиксируем z-индекс для дочернего блока галереи:

.portfolio-gallery-inside {
   z-index:1;
}

Теперь займемся стрелками. Сначала, мы определим общий стиль:

.portfolio-arrows a {
   position:absolute;
   z-index:3;
   width:32px;
   height:32px;
   background-image:url(../images/arrows.png);
   background-repeat:no-repeat;
   outline:none;
   text-indent:-9999px;
}

Потом напишем стиль для одной стрелки:

.portfolio-arrows .prev,
.portfolio-arrows .up {
   display:none;
}

.portfolio-arrows .up,
.portfolio-arrows .down {
   left:50%;
   margin-left:-16px;
}

.portfolio-arrows .prev,
.portfolio-arrows .next {
   top:180px;
}

.portfolio-arrows .up {
   background-position:0 -64px;
   top:20px;
}

.portfolio-arrows .down {
   background-position:0 -96px;
   bottom:120px;
}

.portfolio-arrows .prev {
   background-position:0 -32px;
   left:60px;
}

.portfolio-arrows .next {
   background-position:0 0;
   right:60px;
}

.portfolio-arrows .up:hover {
   background-position:-32px -64px;
}

.portfolio-arrows .down:hover {
   background-position:-32px -96px;
}

.portfolio-arrows .next:hover {
   background-position:-32px 0;
}

.portfolio-arrows .prev:hover {
   background-position:-32px -32px;
}

Элементы div, в которые заключены наши изображения, будут подчиняться следующим правилам:

.portfolio-gallery .item {
   position:absolute;
   top:0;
   width:1000px;
   height:400px;
}

Каждое изображение, расположенное в элементе div будет позиционироваться абсолютно:

.portfolio-gallery .item div {
   position:absolute;
   left:0;
   width:100%;
   height:100%;
}

Каждое изображение будет расположено по центру. Имейте в виду, что в нашем примере мы используем изображение с шириной 600px, поэтому, если Вы используете изображения другого размера, обязательно учтите это:

.portfolio-gallery .item div img {
   position:absolute;
   top:0;
   left:50%;
   margin-left:-300px;
}

Настал черед оформить наши маленькие блоки навигации, которые будут добавляться динамически:

.portfolio .paths {
   position:absolute;
   bottom:60px;
   left:50%;
   margin-left:-30px;
   z-index:4;
}

.portfolio .paths div {
   position:absolute;
   top:0;
}

.portfolio .paths a {
   background:#333;
   display:block;
   position:absolute;
   left:0;
   outline:none;
}

.portfolio .paths a:hover,
.portfolio .paths .active {
   background:#fff;
}

JavaScript

В данной части мы покажем вам, как инициализировать плагин. В Вашем HTML-файле разместите следующие три скрипта сразу перед закрывающим тегом body:

<script src="/js/jquery.js"></script>
<script src="/js/portfolio.js"></script>
<script src="/js/init.js"></script>

Первый из них - это jQuery библиотека, без которой наш плагин не будет работать, второй - собственно наш плагин и третий - сценарий инициализации, со следующим содержимым:

var o = {
   init: function(){
      this.portfolio.init();
   },
   portfolio: {
      data: {
      },
      init: function(){
         $('#portfolio').portfolio(o.portfolio.data);
      }
   }
}

$(function(){ o.init(); });

Для нашего плагина по умолчанию являются следующие значения:

$('#portfolio').portfolio({
   image: {
      width: 600,
      height: 400,
      margin: 20
   },
   path: {
      width: 10,
      height: 10,
      marginTop: 5,
      marginLeft: 5
   },
   animationSpeed: 400
});

Здесь image - настройки изображения (ширина, высота и отступ между изображениями), path - настройки пути, которые определяют размер блоков навигации и отступы между ними. И наконец, animationSpeed - скорость анимации.