Сделаем навигацию по портфолио с помощью jQuery. Изображения сгруппированы по разным тематикам, а навигация осуществляется в 2D пространстве с указанием положения на специальном индикаторе.

Разметка HTML
У нас будет основной контейнер div с фоном, а внутри будут размещаться стрелки и контейнеры галереи.

<div id="portfolio">
    <div id="background"></div>    
    <div class="arrows">
        <a href="#" class="up">Вверх</a>
        <a href="#" class="down">Вниз</a>
        <a href="#" class="prev">Предыдущий</a>
        <a href="#" class="next">Следующий</a>
    </div>
    <div class="gallery">
        <div class="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><img src="images/8.jpg" alt="image8" /></div>
                <div><img src="images/9.jpg" alt="image9" /></div>
                <div><img src="images/10.jpg" alt="image10" /></div>
                <div><img src="images/11.jpg" alt="image11" /></div>
            </div>
            <div class="item">
                <div><img src="images/12.jpg" alt="image12" /></div>
                <div><img src="images/13.jpg" alt="image13" /></div>
                <div><img src="images/14.jpg" alt="image14" /></div>
                <div><img src="images/15.jpg" alt="image15" /></div>
            </div>
        </div>
    </div>
</div>

CSS
Сначала определим стили для основного контейнера. Он будет иметь фиксированное положение по центру экрана (используется техника установки отрицательного значения полей и 50%):

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

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

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

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

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

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

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

Зафиксируем z-index внутреннего элемента div, чтобы сохранить порядок:

#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;
}

Элемент для изображения будет иметь следующие стили:

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

Каждый контейнер изображения будет позиционироваться абсолютно и занимать все доступное пространство:

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

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

#portfolio .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 файла следующие скрипты:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/portfolio.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></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: width - ширина изображения, height - высота изображения, margin - поле между картинками. Опции секции path определяют параметры индикатора навигации: размеры и поля между клетками. animationSpeed - определение скорости анимации.

Добавлено: 26 Апреля 2018 06:51:27 Добавил: Андрей Ковальчук Нравится 0

Добавить