Создание простой галереи изображений Lightbox на jQuery

14 августа 2013 | Опубликовано в css | 7 Комментариев »

Есть ряд вопросов, которые нужно рассмотреть, когда Вы создаете свою тему WordPress. Один из таких элементов страницы – динамическая галерея изображений, использующая или ligthbox, или какую-то скользящую панель. Оба этих пользовательских интерфейса изящно вплетаются в содержание статьи. Так как они оба работают на типичных вебсайтах, удобно иметь под рукой код, готовый к использованию в любых темах оформления блога.

В этом уроке мы сосредоточимся на использовании ligthbox эффекта с плагином jQuery lightBox. Его очень легко установить и настроить для Вашего сайта. За исключением того, что нужно сделать несколько неудобных исправлений в CSS, в целом плагин работает идеально. Есть несколько дополнительных параметров, где Вы можете указать свойства, такие как скорость анимации или прозрачность фона.

Демо – Скачать исходный код

С чего начать

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

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Blog-Style Lightbox Gallery - Design Shack Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/jquery.lightbox-0.5.css">
  <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
</head>

Для этого примера нужно скачать наиболее свежую версии jQuery. Это единственное требование для нормальной работы плагина ligthbox. Другой важный нюанс — это разметка html страницы. Нам нужно отформатировать галерею образов, используя иконки, который ссылаются на изображения высокого разрешения.

Синтаксис очень прост, скопируйте образец, представленный ниже. Это может быть вставлено в любое место тела страницы, и теоретически иконки могут содержаться в любом элементе. В примере используется неупорядоченный список, так как схема работает со списком случайных изображений с сайта Dribbble.

<div id="thumbnails">
  <ul class="clearfix">
    <!-- source: http://dribbble.com/shots/1115721-Turntable -->
    <li><a href="images/photos/01-turntable-illustration-graphic.png" title="Turntable by Jens Kappelmann"><img src="images/photos/01-turntable-illustration-graphic-thumbnail.png" alt="turntable"></a></li>

    <!-- source: http://dribbble.com/shots/1115776-DIY-Robot-Kit -->
    <li><a href="images/photos/02-robot-diy-kit.png" title="DIY Robot by Jory Raphael"><img src="images/photos/02-robot-diy-kit-thumbnail.png" alt="DIY Robot Kit"></a></li>
    <!-- source: http://dribbble.com/shots/1115794-Todly -->
    <li><a href="images/photos/03-todly-green-monster.png" title="Todly by Scott Wetterschneider"><img src="images/photos/03-todly-green-monster-thumbnail.png" alt="Todly"></a></li>

Настройка CSS

В файле jquery.lightbox-0.5.css есть важные селекторы для интерфейса ligthbox. Вам не нужно редактировать этот CSS код, чтобы плагин работал. Но стоит разобраться, что каждый из идентификаторов и классов будет делать на странице. Таким образом у вас есть возможность добавления новых CSS3 эффектов или изменения размеров иконок по необходимости.

/** reset lightbox position **/
#lightbox-container-image-data-box {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
#thumbnails { display: block; margin-bottom: 10px; }
#thumbnails ul li { float: left; margin-right: 26px; margin-bottom: 12px; }

Типичный CSS код включен в главную таблицу стилей документа. Обратите внимание, на самом верху настроен другой селектор для элемента #lightbox-container-image-data-box. Этот блок фактически содержит подпись для изображений, которая осуществляет анимацию выпадения. Если использовать border-box для всех элементов на странице, это может испортить подпись там, где будет отображаться некорректно.

Но это легко исправить, нацеливаясь на этот контейнер и сбрасывая до content-box. После этого намного легче заставить элемент ligthbox вести себя нормально, но по-прежнему сохранять структуру страницы подходящей, используя border-box поля и отступы. Кроме этого маленького исправления, других проблемам с CSS плагина быть не должно.

Как запустить lightBox()

Последнее, что нужно сделать, — вызвать этот плагин функцией яваскрипта. Необходим только один селектор, указывающий на все элементы, использующие эту технологию ligthbox. Наш пример задействует все ссылки внутри элемента #thumbnails. Вы можете быть еще конкретнее и задействовать только ссылки определенных классов.

$(function() {
    $('#thumbnails a').lightBox();
});

Заметьте, что функция сама по себе не требует дополнительных параметров. Это абсолютно базовое поведение плагина. И так как его так легко настроить, вы можете легко сгенерировать множество отдельных галерей, находящихся на одной странице! Если у вас есть свободное время, посмотрите на дополнительные настройки плагина, чтобы получить представление о том, какие еще существуют возможности.

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

$(function() {
  $('a[@rel*=lightbox]').lightBox({
    overlayBgColor: '#FFF',
    overlayOpacity: 0.6,
    imageLoading: 'http://example.com/images/loading.gif',
    imageBtnClose: 'http://example.com/images/close.gif',
    imageBtnPrev: 'http://example.com/images/prev.gif',
    imageBtnNext: 'http://example.com/images/next.gif',
    containerResizeSpeed: 350,
    txtImage: 'Imagem',
    txtOf: 'de'
   });
});

Демо – Скачать исходный код

Заключение

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

Автор урока Jake Rocheleau

Перевод — Дежурка

Смотрите также:

Опубликовано в css, августа 14, 2013
Метки: css, css3, Jquery, jquery плагины, плагины jquery, урок css3, уроки css, уроки css3, эффекты css

�

Михаил
15 августа 2013 в 14:27
0

А как это поставить на сайте WordPress.. подскажите пожалуйста

Mary Ответ:
августа 15, 2013 at 2:50 пп

+1

Есть удобное руководство в справочнике WordPress:
codex.wordpress.org/%D0%A...p_enqueue_script
Попробуйте это вариант.
Тимур
7 марта 2014 в 14:21
+3

Хороший лайтбокс и спасибо за урок, только не могу разобраться в стиле — где сделать так, чтобы изображение открывалось не на полный размер, потому что большие изображения загораживают весь экран, а сил менять 500 картинок просто не хватит.
Володя
3 февраля 2015 в 5:21
0

Дякую, отличный скрипт, всё без конфликтов установлено, пояснение гуд, однозначно ребза качайте!
Максим
9 июня 2015 в 10:19
0

А подскажите, как в подпись к картинке в лайтбоксе добавить ссылку?