Навигация по фотографиям в портфолио с возможностью перемещаться вверх, вниз, влево или вправо. Используется jQuery.

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

В начале определим стиль основного контейнера. Устоновим фиксированную позицию и отцентрируем по середине экрана с помощью left и top и margin:

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

Контейнер с фоном тоже сделаем фиксированным и добавим эффект точечного освещения с помощью bacground-image:

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

Для DIVа inside установим z-index:1;

#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 с классом item, которые являются оболочками наших изображений, стили будут такие:

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

jаvascript

В шапке подключаем скрипты:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/portfolio.js" type="text/javascript"></script>
        <script src="js/init.js" type="text/javascript"></script>

Сначала jQuery, затем плагин и скрипт инициализации.
По умолчанию у плагина portfolio.js такие параметры:

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

Размеры изображения и отступ вокруг. Далее размеры и отступы навигационных квадратиков. И последнее это скорость анимации в мс.