Галерея ввиде портфолио
Навигация по фотографиям в портфолио с возможностью перемещаться вверх, вниз, влево или вправо. Используется 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
});Размеры изображения и отступ вокруг. Далее размеры и отступы навигационных квадратиков. И последнее это скорость анимации в мс.
