Доброго времени суток, дорогой читатель! В этой статье я хотел бы поделиться опытом в создании галереи с помощью Twitter Bootstrap Image Gallery. На мой взгляд это самая простая в подключении к сайту галерея. Все что нам понадобится — это подключить CSS и JS файлы галереи, а также вывести изображения. Указав свойство data-gallery в тэге-ссылке <a hfer="/path/to/image.jpg" data-gallery></a>, Twitter Bootstrap Image Gallery включит это изображение в свой список.

Пример. <a href="/path/to/image.jpg" data-gallery=""><img src="/path/to/image.jpg" alt=""></a>

Twitter Bootstrap Image Gallery служит лишь для отображения изображений. Она не умеет загружать и выводить изображения, не формирует из них альбомы. Для этого Вам понадобится стороннее дополнение, плагин или самописный код.

Ниже я приведу пример подключения и использования Twitter Bootstrap Image Gallery в сочетании с CMS MODx Revolution. В качестве сторонней галереи я воспользуюсь дополнением – Gallery. По правде говоря дополнение Gallery не особо нужно, ведь нам нужно лишь вывести изображения галереи на страницу, а там все сделает Twitter Bootstrap Image Gallery. Вывести изображения можно и при помощи сочетания дополнений FileDir (для вывода изображений) и PhpThumbOf (для создания миниатюр изображений) или любого другого сочетания. Но в защиту дополнения Gallery могу привести следующее преимущества:

  1. Нам не нужно сочетание дополнений, в Gallery есть все, что нам нужно.
  2. Управление альбомами и изображениями из менеджера (Приложения -> Gallery).
  3. 4 вида загрузки изображений.

Остановимся на этих 3 преимуществах (думаю их будет вполне хватать для выбора этого дополнения) и перейдем уже к установке и настройке.

Установка

Скачиваем и устанавливаем дополнение Gallery через менеджер Управление пакетами ("Приложения" -> "Установщик" -> "Загрузить дополнения"). Теперь идем на официальную страницу Twitter Bootstrap Image Gallery и скачиваем ее. Там же Вы можете опробовать возможности галереи. Twitter Bootstrap Image Gallery основывается на плагине jQuery blueimp Gallery, т.ч. качаем и ее. Открываем архив Twitter Bootstrap Image Gallery и копируем содержимое в новую папку. Теперь открываем архив blueimp Gallery и копируем файлы css/blueimp-gallery.min.css и js/jquery.blueimp-gallery.min.js в соответствующие папки Twitter Bootstrap Image Gallery, попутно удаляя demo.css и demo.js из-за ненадобности. И в итоге копируем содержимое папки Twitter Bootstrap Image Gallery (папки css, img и js) в соответствующие папки Вашего шаблона.

Внедрение в шаблон

Сначала подключим необходимые css файлы к шаблону. Между тэгами <head></head> вставляем :

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Bootstrap Gallery-->
<link href="[[++assets_url]]templates/bootstrap/css/bootstrap-image-gallery.min.css" rel="stylesheet" media="screen">
<link href="[[++assets_url]]templates/bootstrap/css/blueimp-gallery.min.css" rel="stylesheet" media="screen">

Следующим шагом нам нужно будет подключить js файлы плагина. В конец шаблона до тэга </body> подключаем:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation and button states -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<!-- Bootstrap Gallery JavaScript --> <script src="[[++assets_url]]templates/js/jquery.blueimp-gallery.min.js"></script>
<script src="[[++assets_url]]templates/js/bootstrap-image-gallery.min.js"></script>

Проверьте пути css и js файлов, ведущие к ним и исправьте их при необходимости. Так же проверьте путь подключения изображения внутри css файла.

Модальное окно

На этом окне базируется вывод изображений Twitter Bootstrap Image Gallery. Создадим чанк ImageGallery и внесем HTML код модального окна:

<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<p class="description"></p>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<!-- The modal dialog, which will be used to wrap the lightbox content -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">&times;</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>

В этом коде сразу два окна, которые можно переключать при помощи параметра data-use-bootstrap-modal, у него два значения true и false. Изменяя его Вы поймете какое значение соответствует какому из окон. В моем примере я выбрал значение false. Далее нам нужно создать еще чанк, который будет отвечать за вывод миниатюр изображений, назовем его galItemThumb:

 <div class="thumb">
<a id="[[+id]]" href="[[+image_absolute]]" class="thumbnail" title="[[+name]]"  data-gallery>
<img class="img-responsive" src="[[+thumbnail]]" alt="[[+name]]" />
</a>
</div>

Как я и говорил выше, именно параметр data-gallery в тэге <a> указывает Twitter Bootstrap Image Gallery на то, что при нажатии на миниатюру изображение должно развернуться на переднем плане экрана.

Если Вы используете MODx, то не забудьте вывести чанк [[$ImageGallery]] в контенте документа или шаблона галереи.

Менеджер галереи. Создание альбома

После внесения всего этого кода давайте разомнемся и проделаем простую работу – создадим альбом и внесем туда несколько изображений. Переходим через верхнее меню панели управления сайтом "Приложения" -> "Gallery". Жмем кнопку  , заполняем поля и жмем  Теперь у нас есть альбом и в него надо бы добавить изображений. Нажимаем на ссылку с названием только что созданного альбома. Внизу под всеми текстовыми полями есть поле "Обложка альбома", она была бы нам интересна, если бы мы создавали несколько альбомов, т.ч. пропускаем его и приступаем к сути. Выбираем один из 4 видов загрузки (я выбрал Multi-Upload) и загружаем несколько фотографий или каких-нибудь других изображений. Проверяем чтобы альбом был Активен и Видимый (галочки напротив них должны быть установлены).

Для манипуляций над изображениями наведите курсор мыши на него и нажмите правую кнопку мыши.

Вывод изображений из альбома

Отлично! Теперь нам осталось только вывести все изображения из альбома. Для этого нам нужна страница (ресурс MODx). Если ее нет, то создайте, иначе заходим в нее для редактирования и в поле "Содержимое ресурса" вводим код сниппета, предварительно отключив редактор (галочка "Toggle Editor" под полем "Содержимое ресурса"):

[[Gallery? &album=`1` &useCss=`0` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`galItemThumb`]]

Здесь мы вызываем сниппет с параметрами:

  • album='1' – выводит альбом с индификатором 1;
  • useCss='0' – не используем встроенный css файл плагина Gallery;
  • thumbWidth='195' – выводим миниатюры шириной 195px;
  • thumbHeight='140' – выводим миниатюры высотой 140px;
  • thumbTpl='galItemThumb' – используем чанк-шаблон galItemThumb для вывода миниатюр изображений.

Если Вы используете шаблон Bootstrap Template на своем сайте, то рекомендую заменить в чанке galItemThumb <div class="thumb"> на <div class="col-lg-3 col-md-4 col-xs-6 thumb">

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

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.