Блог

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

Разметки

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

Code

<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>

Определим пользовательские позиции, высоты и вращения для каждого элемента.

Как видите, мы используем "REL" атрибут Lightbox 2 сценария. Здесь мы добавим путь к большим версиям эскиза.
Давайте посмотрим на стиль

CSS

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

Code

.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 псевдо-элемент для того, чтобы добавить дополнительный эффект тени на левой стороне полосы, только на тонкий эффект:

Code

.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 , мы можем определить, что на сенсорном устройстве мы не должны показывать по кругу.
Мы добавим эффект при наведении, который удаляет круге без сенсорного браузеров:

Code

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

Название будет иметь следующий стиль:

Code

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

Оболочка для прокрутки списка эскизов будет иметь дополнительные отступы и с его родителями переполнения устанавливается в скрытом, мы не увидим полосы прокрутки:

Code

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

Коробки размеров установлен на "границы окна" в нашей normalize.css поэтому мы должны установить его обратно в "контент-поле" в данном случае, потому что мы действительно хотим, чтобы увеличить ширину.
Для сенсорных устройств, мы просто не добавить, что заполнение. (Только думать об оптимизации для iPad, мы знаем, что полос прокрутки не будет показан).

Code

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

Список Фото полоса будет иметь переход на непрозрачность, когда мы наведем:

Code

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

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

Code

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

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

Code

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

Якорь будет установлен для отображения: блокировать:

Code

ul.pb-strip li a {
display: block;
}

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

Code

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

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

Code

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

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

Code

.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 сценария, и мы будем адаптировать некоторые стиль, чтобы соответствовать нашим потребностям. Прежде всего, давайте определим, что по умолчанию шрифт должен быть унаследован. Мы также добавим обивка, потому что мы будем двигаться стрелки навигации за пределами изображения. Это будет гарантировать места для стрелок:

Code

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

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

Code

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

Мы будем забирать прокладки фунт-контейнер и добавить его вместо того, чтобы изображение таким образом, что мы ничего не видим в момент перехода (в противном случае мы бы увидели белый 20px высокий контейнер, потому что наши автоматического высота):

Code

.lb-container {
  padding: 0;
}

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

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

Code

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

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

Code

.lb-dataContainer {
  position: relative;
  max-width: 100%;
}

.lb-data .lb-close {
  bottom: 10px;
  position: absolute;
  width: 73px;
  height: 73px;
  right: 5px;
}

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

Code

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

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

Code

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

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

Code

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

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

И вот оно что! Я надеюсь, вам понравился этот небольшой эксперимент и найти его полезным и вдохновляющим!