Всем привет. Сегодня в этом уроке я расскажу как создать галерею в 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 галереи закончено.

* Демо

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

Не стесняйтесь комментировать и задавать вопросы…