Навигация для портфолио
Сделаем навигацию по портфолио с помощью 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 - определение скорости анимации.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/4CXgSj3R4VE/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.