Lecaw

Учимся создавать Web-сайты

Фотографии как в фотокабинке с интеграцией jQuery Lightbox 2

August 15, 2012
CSS
265hits

В сегодняшнем руководстве мы покажем, как создать симпатичные фото полосы и интегрировать их с jQuery Lightbox 2, один из самых популярных и широко используемых сценариев лайтбокса. Идея состоит в том, чтобы создать несколько таких полосок с фотографиями и добавить к ним навигацию, прокручивая её при помощи колеса мыши. При щелчке по изображению мы покажем увеличенную версию, используя jQuery Lightbox 2. Мы также оптимизируем его для сенсорных устройств.

ДЕМО Исходные файлы

 

 

Изображения предоставил  Sherman Geronimo-Tan и находятся под лицензией  Creative Commons Attribution 2.0 Generic (CC BY 2.0).

Примеры использования jQuery Lightbox 2 можете найти здесь.

HTML-разметка

Давайте сначала напишем HTML для четырех фото полос. Каждая фото полоса будет состоять из основного контейнера с классом pb-wrapper. Сама полоса - неупорядоченный список и мы разместим её в div с классом pb-scroll. У основания мы добавим заголовок:

<div class="pb-wrapper pb-wrapper-1">
<div class="pb-scroll">
<ul class="pb-strip">
<li>
<a href="#" rel="lightbox[album1]" title="Spring">
<img src="/images/small/1.jpg" />
</a>
</li>
<li>
<a href="#" rel="lightbox[album1]" title="Sunshine">
<img src="/images/small/2.jpg" />
</a>
</li>
<li> <!--...--> </li>
<!--...-->
</ul>
</div>
<h3 class="pb-title">Pure Serenity</h3>
</div>

У каждой фото полосы будет класс pb-wrapper-1, pb-wrapper-2, и т.д. Эти классы помогут нам определить позицию, высоту и наклон фото полос.

фото полосы

Мы используем атрибут “rel” для сценария jQuery Lightbox 2. Здесь мы добавим путь к увеличенной версии фотографий.

CSS

У оболочек для фото полос будет фиксированная позиция. Это поможет нам определять высоту относительно размера экрана. Мы добавим тень и текстурированное фоновое изображение, для того чтобы оно больше было похоже на бумагу:

.pb-wrapper {
    position: fixed;
    background: #fff url(../images/paper.jpg) repeat center bottom;
    width: 170px;
    margin-top: 10px;
    padding: 20px 10px 100px;
    overflow: hidden;
    box-shadow:
        inset 1px 0 0 3px rgba(255,255,255,0.6),
        0 1px 4px rgba(0,0,0,0.3), 
        inset 0 0 20px rgba(0,0,0,0.05),
        inset 0 -25px 40px rgba(0,0,0,0.08);
}

Большой отступ снизу оставит некоторое пространство для заголовка.

Для небольшого круга мы будем использовать псевдо-элемент :after, который покажет пользователю что он должен прокрутить колесом мыши, и псевдо-элемент :before, чтобы добавить дополнительную тень к левой стороне полосы:

.pb-wrapper:before {
    content: '';
    position: absolute;
    width: 2px;
    left: 0;
    top: 3px;
    bottom: 3px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
 
.pb-wrapper:after{
    position: absolute;
    content: '';
    background: rgba(192,227,232, 0.8) url(../images/scroll.png) no-repeat center center;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -35px;
    border-radius: 50%;
    z-index: 1000;
}

Так как мы будем использовать Modernizr, мы можем отобразить наши фото полосы на сенсорном устройстве.

.touch .pb-wrapper:after,
.pb-wrapper:hover:after {
    display: none;
}

Стиль для заголовка:

h3.pb-title {
    padding: 5px;
    font-family: 'Pacifico', Cambria, Georgia, serif;
    color: #374571;
    font-size: 14px;
    font-weight: 300;
    margin: 0;
    user-select: none;
}

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

.pb-scroll {
    position: relative;
    height: 100%;
    width: 150px;
    padding-right: 30px;
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: content-box;
}

Box-sizing установлен на "border-box" в normalize.css, поэтому мы должны установить его обратно на "content-box" потому что нам нужно увеличить ширину.

.touch .pb-scroll {
    padding-right: 0px;
}

Мы добавим непрозрачность при прокрутке списка:

ul.pb-strip {
    padding: 0;
    list-style: none;
    position: relative; 
    margin: 0 auto;
    width: inherit;
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
}

При прокрутке мы будем изменять уровень непрозрачности, но не будем использовать этот эффект на сенсорных устройствах.

.pb-wrapper:hover ul.pb-strip,
.touch .pb-wrapper ul.pb-strip{
    opacity: 1;
}

Зададим фиксированную ширину для элементов списка и небольшие поля для разрыва между изображениями:

ul.pb-strip li {
    display: block;
    width: 150px;
    position: relative;
    margin-bottom: 7px;
}

Чтобы не было одинакового контента, мы будем просто использовать разные названия атрибутов, чтобы добавить некоторые метки на изображения. Это мы сделаем при помощи псевдо-класса :after. Ещё добавим полупрозрачный фон и разместим его по центру:

ul.pb-strip li a:after {
    position: absolute;
    z-index: 999;
    height: 20px;
    width: 120px;
    left: 10px;
    padding: 5px;
    bottom: 10px;
    background: rgba(255,255,255,0.6);
    content: attr(title);
    font-size: 13px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.9);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

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

ul.pb-strip li img {
    display: block;
    box-shadow: 0 0 1px 1px #fff;
}

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

.pb-wrapper-1 {
    height: 89%;
    left: 20%;
    transform: rotate(3deg);
}
 
.pb-wrapper-2 {
    height: 85%;
    left: 40%;
    transform: rotate(-2deg);
}
 
.pb-wrapper-3 {
    height: 95%;
    left: 60%;
    transform: rotate(1deg);
}
 
.pb-wrapper-4 {
    height: 75%;
    left: 80%;
}

Мы используем сценарий Lightbox 2, давайте адаптируем его стиль для нашего проекта. Прежде всего давайте определим какой будет использоваться шрифт по умолчанию. Мы также добавим отступы, потому что мы расположим стрелки навигации вне изображений:

#lightbox {
    font-family: inherit;
    padding: 0 85px;
}

Установим overflow: visible, потому что нужно разместить наши стрелки навигации снаружи. Мы также добавим наш бумажный фон к лайтбоксу. Макс. ширина 100% придаст лайтбоксу быстродействие. Также мы должны установить height со значением auto, это не позволит лайтбокску изменяться в размерах:

.lb-outerContainer {
    overflow: visible !important;
    background: #fff url(../images/paper.jpg) fixed repeat top left;
    border-radius: 0px;
    max-width: 100%;
    height: auto !important;
}

Добавим отступы для класса lb-container и установим к изображению так, чтобы не было ничего видно в момент перехода (в противном случае, было бы видно белый контейнер с высотой 20px):

.lb-container {
    padding: 0;
}
 
#lightbox img.lb-image {
    padding: 10px;
    max-width: 100%;
}

Установим max-width: 100% к изображению, что бы оно корректно отображалось в маленьких окнах; это изменит его размеры, если оно превысит ширину контейнера.

Навигация должна быть большего размера чем оболочка, чтобы мы могли установить стрелки влево и вправо вне лайтбокса:

.lb-nav {
    box-sizing: content-box;
    padding: 0 80px;
    left: -80px;
}

Теперь зададим позицию для кнопки закрытия. Для этого мы установим position: relative и позиционируем элемент как нам необходимо. Мы снова установим максимальную ширину в 100% что бы увеличить быстродействие:

.lb-dataContainer {
    position: relative;
    max-width: 100%;
}
 
.lb-data .lb-close {
    bottom: 10px;
    position: absolute;
    width: 73px;
    height: 73px;
    right: 5px;
}

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

.lb-prev, .lb-next {
    position: absolute;
    cursor: pointer;
    width: 60px;
    height: 60px;
    top: 50%;
    margin-top: -30px;
}
.lb-prev,
.lb-prev:hover{
    background: url(../images/prev.png) no-repeat 50% 50%;
}
.lb-next,
.lb-next:hover{
    background: url(../images/next.png) no-repeat 50% 50%;
}

Стиль для текстовых элементов будет выглядеть следующим образом:

.lb-data .lb-caption {
    font-family: 'Pacifico', Cambria, Georgia, serif;
    font-weight: 300;
    font-size: 30px;
    color: #fff;
    line-height: 32px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
 
.lb-data .lb-number {
    text-indent: 4px;
    color: #c0e3e8; 
}

Последнее, но не менее важное, медиа-запросы для небольших устройств:

@media screen and (max-width: 650px) {
    div.pb-wrapper {
        position: relative;
        margin: 20px auto;
        height: 500px;
        left: auto;
    }
}
 
@media screen and (max-width: 350px) {
    #lightbox {
        padding: 0 20px;
    }
    .lb-nav {
        padding: 0;
        left: 0;
    }
}

Первый медиа-запрос устанавливает фиксированную высоту полосы и разместит их по центру, друг под другом. Второй предназначен для стиля лайтбокса. Мы поместим стрелки навигации в верхней части изображения, так что у нас останется больше места для изображений.

ДЕМО Исходные файлы

Дополнительная информация

RATTING:
(0 голосов)

Медиа