Как создать галерею в MODX Revolution?

Всем привет. Сегодня в этом уроке я расскажу как создать галерею в MODX Revolution с помощью Twitter Bootstrap Image Gallery и дополнений FileDir (для вывода изображений) и PhpThumbOf (для создания миниатюр изображений).

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

Загрузка и установка необходимых ресурсов

Скачайте в репозитории MODX и установите дополнения PhpThumbOf и FileDir через Управление дополнениями менеджера. Далее скачайте Bootstrap Image Gallery файлы, распакуйте их и залейте на ваш сервер с сайтом в соответствующие папки, например: assets/css, assets/js, assets/img.

Загрузите изображения галереи на сервер в удобную для вас папку, например: assets/gallery/

После загрузки всех необходимых ресурсов, дерево файлов будет иметь следующий вид:

Создание шаблона

 

  • Берём стандартный базовый шаблон MODX - Base template.
  • Добавляем в тег HEAD необходимые стили:
  • Код
    <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css"> <!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]--> <link rel="stylesheet" href="assets/css/bootstrap-image-gallery.min.css">
  • Добавляем в тег HEAD необходимые скрипты:
  • Код
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script> <script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script> <script src="assets/js/bootstrap-image-gallery.min.js"></script>
  • Помещаем в тег BODY всплывающий модуль галереи:
  • Код
    <!-- modal-gallery это модальный диалог для галереи изображений --> <div id="modal-gallery" class="modal modal-gallery hide fade"> <div class="modal-header"> <a class="close" data-dismiss="modal">&times;</a> <h3 class="modal-title"></h3> </div> <div class="modal-body"><div class="modal-image"></div></div> <div class="modal-footer"> <a class="btn modal-download" target="_blank"><i class="icon-download"></i> Загрузить</a> <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000"><i class="icon-play icon-white"></i> Слайдшоу</a> <a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> Предыдущий </a> <a class="btn btn-primary modal-next"> Следующий <i class="icon-arrow-right icon-white"></i></a> </div> </div> <!-- конец modal-gallery -->
  • Делаем вызов сниппета FileDir и указываем для него путь к галерее, где содержаться изображения:
  • Код
    <div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery"> [[!filedir? &dir = `assets/gallery` &fcache =`true` &tpl=`photofile.tpl`]] </div>
  • Шаблонируем вывод отдельного изображения сниппета FileDir - создаём чанк photofile.tpl. Код чанка:
  • Код
    <a href="[[+file]]" title="[[+fname]]" rel="gallery"><img src="[[+file:phpthumbof=`h=220&rc=1`]]" alt=""></a>
  • Конечный шаблон:
  • Код
    <html> <head> <title>[[++site_name]] - [[*pagetitle]]</title> <base href="[[++site_url]]" /> <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css"> <!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]--> <link rel="stylesheet" href="assets/css/bootstrap-image-gallery.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script> <script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script> <script src="assets/js/bootstrap-image-gallery.min.js"></script> </head> <body> <!-- modal-gallery это модальный диалог для галереи изображений --> <div id="modal-gallery" class="modal modal-gallery hide fade"> <div class="modal-header"> <a class="close" data-dismiss="modal">&times;</a> <h3 class="modal-title"></h3> </div> <div class="modal-body"><div class="modal-image"></div></div> <div class="modal-footer"> <a class="btn modal-download" target="_blank"><i class="icon-download"></i> Загрузить</a> <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000"><i class="icon-play icon-white"></i> Слайдшоу</a> <a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> Предыдущий </a> <a class="btn btn-primary modal-next"> Следующий <i class="icon-arrow-right icon-white"></i></a> </div> </div> <!-- конец modal-gallery --> <div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery"> [[!filedir? &dir = `assets/gallery` &fcache =`true` &tpl=`photofile.tpl`]] </div> </body> </html>

Всё. Создание MODX Twitter Bootstrap галереи закончено.

4346