Урок 18. Создание галереи в 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 необходимые стили:
  • Добавляем в тег HEAD необходимые скрипты:
  • Помещаем в тег BODY всплывающий модуль галереи:
  • Делаем вызов сниппета FileDir и указываем для него путь к галерее, где содержаться изображения:
  • Шаблонируем вывод отдельного изображения сниппета FileDir - создаём чанк photofile.tpl. Код чанка:
  • Конечный шаблон:

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

Демо

При создании статьи использовались материалы:

  1. Галерея изображений Bootstrap
  2. Сниппет FileDir Валентина Расулова aka valikras
Не стесняйтесь комментировать и задавать вопросы...