ModX Revo - Галерея ColorBox и её установка

Опубликовано admin - сб, 11/12/2011 - 21:08

Установка галерей изображений в Modx Revo вызывает наибольшее затруднение у начинающих пользователей Modx. Например, часто не получается дубиться работоспособности в некоторых новейших браузерах, особенно на мобильных устройствах работы галереи плагина Galery на основе jQuery, напримре галерей lightbox или colorbox. Поэтому далее будет разобран пример установки галереи. В низу статьи есть видео с YuoTube.

Между тем, при правильной установке плагина jQuery colorbox(галерея на jQuery) вполне возможно установить работоспособную галерею. Что необходимо для установки галереи?

Видео с YouTube о том как вставить галерею в ModX Revo:

Для начала установите MODx, если Вы этого ещё не сделали. Затем установите пакет Galery через "Сиситема" -> "Управление пакетами" -> "Загрузить дополнение" -> "По популярности" -> "Galery" -> "Загрузить" -> "Пакеты" -> "Установить" -> "Продолжить" .

Сейчас нужно создать несколько галерей на вкладке "Компоненты" - "Галерея". Зайти в альбом и загрузить изображения, потом обязательно сохранить его!

После этого нужно изменить стандартные чанки галереи (вкладка "Элементы", подраздел дерева "Чанки").

Чанки галереи

Чанки "GalleryAlbumTpl"

Первый отвечает за вывод разделов всех альбовомов:

Так как мне не нужно, чтоб альбомы и их названия выводились, я просто их закомментировал в чанке "GalleryAlbumTpl".

Чанки "GalAlbumRowTpl"

Второй чанк отвечает за вывод и отображение отдельных альбомов:

Чанки "GalItemThumb"

Третий чанк отвечает за вывод отдельного изображения из определенного альбома:

Страница вывода предыдущих чанков

Шаблон вывода сниппетов галереи (для примера обычная стринца HTML):

Если Вы не создадите TV "galery_name"

Будет отображена ошибка "Warning: Invalid argument supplied for foreach() in /var/www/jquery/data/www/37.230.112.175/modx/core/cache/includes/elements/modsnippet/1.include.cache.php on line 106 Fatal error: Cannot use string offset as an array in /var/www/jquery/data/www/37.230.112.175/modx/core/cache/includes/elements/modsnippet/1.include.cache.php on line 165 "

Особое внимание уделите полю [[*galery_name]], оно необходимо для вывода галереи, котороя указана в дополнительном поле (TV) для каждой статьи, вместо него Вы можете написать название галереи, которую только-что создали. Дополнительное поле "galery_name" TV необходимо создать самостоятельно, на вкладке "Элементы", если Вы хотите указывать галерею для каждой статьи, если будете прописывать название галереи вручную, то создовать TV не надо.

По умолчанию в MODX отсутсвует папка templates. Её нужно создать и загрузить в неё следующие файлы:

  • colorbox.css
  • jquery.colorbox-min.js
  • jquery.lazyload.mini.js

Плагины "slimbox" или "galleryfic"

Если вым необходимо использовать плагины "slimbox" или "galleryfic", то нужно обновить чанк "GalItemThumb", в котром мы просто меняем парметр rel на "ligh tbox", например для "slimbox"

Соотвественно необходимо изменить наш с вами основной шаблон:

Обратите внимание не нужно самостоятельно прописывать путь для js и css файлов необходимых для работы галереи "slimbox", так как Компоннт Galery самостоятельно сделает это за нас.

Итог нашей с Вами работы будет выглядеть примерно следующим образом, в зависимости от плагина:

MODX Revolution Photo Gallery @Slimbox@

Demo Album 1

Demo Album 1 - Description

MODX Revolution Photo Gallery @Colorbox@

Demo Album 1

Demo Album 1 - Description

Взаимосвязанные материалы

# 1. Самое необходимое при разработках в ModX Revolution! (понедельник, мая 28, 2018 - 18:45 ),

Давно не писал что-нибудь заумное, чтоб после прочтения у Вас голова заболела, поэтому решил написать! Может будет трудно осилить, но Вы приблизитесь к опытному уровню разработок в modx. читать...

# 2. Правильный Ajax в ModX Revo! (вторник, ноября 27, 2012 - 20:43 ),

Ajax запросы в Modx Revo можно делать различными способами:

читать...
# 3. ModX Revo - Галерея ColorBox и её установка (суббота, ноября 12, 2011 - 21:08 ),

Установка галерей изображений в Modx Revo вызывает наибольшее затруднение у начинающих пользователей Modx. читать...

# 4. ModX Revo - Загрузка статьи из фронтенда в бакэнед (воскресенье, октября 30, 2011 - 18:34 ),

Пример загрузки статьи с сайта в админ панель Modx Revo. После загрузки пользователь будет перенаправлен на страницу с id "251". читать...

# 5. Что такое Wayfinder? (четверг, мая 5, 2011 - 21:24 ),
//
На разработку сайта! Скидки до 20%!