Как создать галерею в 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">
<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>
<!-- modal-gallery это модальный диалог для галереи изображений --> <div id="modal-gallery" class="modal modal-gallery hide fade"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</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>
<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">×</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 галереи закончено.