—»     —»   Навигация по изображениям в портфолио посредством jQuery
  Раздел: Руководства, Скрипты и коды   Комментариев: 2  

Навигация по изображениям в портфолио посредством jQuery



Сегодня мы разработаем шаблон портфолио с навигацией по изображениям посредством jQuery. Идея заключается в том, чтобы представить изображения в портфолио сгруппированным модным способом посредством 2D-переходов (горизонтальных/вертикальных). Для навигации по изображениям можно использовать небольшие кнопки под изображениями, либо воспользоваться стрелками на клавиатуре.

Навигация по изображениям в портфолио посредством jQuery

Изображения использованы от Анжело Гонзалез (Angelo Gonzalez). Вы можете посмотреть остальные фотографии автора на его странице в сервисе Flickr.

Разметка

В качестве обёртки мы будем использовать основной div с фоном, стрелками и контейнером галереи:

<div id="portfolio">
<div id="background"></div>
<div class="arrows">
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="prev">Previous</a>
<a href="#" class="next">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>
<div class="item">
...
</div>
</div>
</div>
</div>

Теперь давайте перейдём к стилям.

CSS

Для начала давайте определим стили основного контейнера. Мы зафиксируем позицию и центрируем его посредством отрицательных полей:

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

Галерее будет задан параметр абсолютного позиционирования, а также и её внутреннего div’а:

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

Div’ы элементов, которые являются нашими оболочками для изображений, оформлены следующим образом:

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

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

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

Каждое изображение будет центрировано. Учитывайте, что в нашем примере мы используем изображения с шириной в 600 пикселей, так что если ваши изображения имеют большее разрешение, то вам следует адаптировать их:

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

И здесь всё, что касается стилей.

Javascipt

В данной части мы покажем вам, как инициализировать плагин. В головной секции нашего 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
});

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

Следите за новостями на сайте и за последующими руководствами!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 7830   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 3 октября 2011 @ 19:15
Написал: radionanet — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо! Очень понравилось, применю в своих целях
Комментарий #2: 3 октября 2011 @ 19:22
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3304   |   Комментариев: 500
ICQ: --- не указано ---
radionanet, пожалуйста. Рады были помочь smile
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30