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

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

Сложность

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

HTML-разметка

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

<div class="pb-wrapper pb-wrapper-1">
<div class="pb-scroll">
<ul class="pb-strip">
<li>
<a href="/images/large/1.jpg" rel="lightbox[album1]" title="Spring">
<img src="/images/small/1.jpg" />
</a>
</li>
<li>
<a href="/images/large/2.jpg" 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;
}

В normalize.css свойство box-sizing установлено со значением border-box, поэтому мы должны поменять его на 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% добавит для jQuery lightbox быстродействие. Также мы должны установить высоту со значением 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:

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

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

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

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

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

Перевод статьи Photo Booth Strips with Lightbox

Тэги: responsivelightboxphotogallery

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.