Урок 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 галереи закончено.
При создании статьи использовались материалы:
- Галерея изображений Bootstrap
- Сниппет FileDir Валентина Расулова aka valikras
Радионова Ксения Александровна
07.10.2012 20:28Делала все по мануалу, но не работает модуль просмотра фотографий
скрин - http://clip2net.com/s/2nbAK
фото просто открывают blank
Подскажите, в чем м.б. проблема?
Viktor Minator
07.10.2012 22:38в гугл хроме нажмите Просмотр кода элемента, дальше Resources и гляньте какой скрипт не загрузился...
Denys Butenko
13.10.2012 16:38"Демо" ведет на главную страницу.
Александр Наумов
16.10.2012 15:28Демо не работает, не показывает картинки.
Александр Наумов
16.10.2012 15:33Точнее нет превьюшек в Firefox
Viktor Minator
16.10.2012 16:02спасибо. исправил.
Николай Лукиных
06.05.2013 14:49Почему-то не подргужается css-ка http://blueimp.github.com/cdn/css/bootstrap.min.css. В чём может быть проблема?
Viktor Minator
06.05.2013 15:15да. возьмите с локалхоста загружайте (это обычный бутстреп стиль).
Саня Федосиенко
20.06.2013 18:17А как сделать так, чтобы на разных страницах показывались разные галереи? Т.е. у меня есть есть 3 дочерних документа - это три разных галереи. Как можно в таком случае реализовать?
Viktorminator
10.08.2013 03:14Для каждого ресурса своя ТВ тип ввода galleryItem или galleryAlbum
Василий Столейков
04.07.2013 09:06Не работает клик по фото: TypeError: undefined is not a function [https://modx.ws/demo/uroki/18/js/bootstrap-image-gallery.min.js:1]
Viktorminator
10.08.2013 03:14Умерло демо по непонятным причинам :(
Viktor Minator
27.08.2013 23:39Починил демо
Павел Мерзляков
15.10.2013 21:20Оптимизировал и все сделал по свой шаблон, потом остался последний шаг, создание папки с изображениями и залития туда данных, но в последний момент при переходе страницы вылезла фатальная ошибка, после выяснения из за какого тега это происходит, а происходит это из за &dir = `gellery`, я его убрал, но без него ни один файл не отображает, в чем вообще может быь причина?
Алексей
25.10.2013 19:37Абсолютно та же проблема сервер выдает HTTP 500 (Internal Server Error)
PHP Fatal error: Call to undefined method DirectoryIterator::getExtension() in /core/cache/includes/elements/modsnippet/22.include.cache.php on line 115
Что делать, может быть вы нашли какое - либо решение?
Александр Абрамов
14.03.2014 13:57Здравствуйте, Виктор! Спасибо за проделанную работу.
Учусь по вашим урокам.
Сделал галерею на отдельной странице, все работает
Возникла задача отобразить последние добавленные фотографии на галвной странице (9 штук) Без всяких альбомов. Спасибо!
Павел Баженов
31.03.2014 04:50У меня над галерей появляется надпись TOTAL: 16 files. Появляется она внутри блока link. Подскажите куда копать?
Alexandr Zilin
30.05.2014 14:30Добрый день. Не могу запустить данную галерею, появляются надписи: Загрузить Слайдшоу Предыдущий Следующий, и картинки, при нажатии на картинку, она просто открывается в полный размер....и тишина...
Виктор, подскажите, как сделать вывод случайного изображения из галереи? Сниппет RandomImages не совсем подходит, т.к. выводит случайное изображение из конкретно указанного альбома, а нужно чтобы из всех альбомов было. Вообще, данная информация (рандомизация в Gallery) как-то вяло в интернете обсуждается.