Урок 30. Вывод отзывчивой галереи в MODX
Давайте создадим галерею с отзывчивыми изображениями. Для этого нам понадобится плагин для вывода галереи и какой-нибудь сниппет для MODX, которым можно будет вывести изображения, хранящиеся на сервере.
Для этих целей я выбрал:
- https://feimosi.github.io/baguetteBox.js/ лайтбокс скрипт для работы галереи
- дополнение от Валентина Расулова студия Artdevue - дополнение Filedir
- ресайзер изображений - PhpThumbOn, например, от Евгения Борисова (документация)
Из документации лайтбокса возьмём пример для отзывчивых изображений:
<a href="img/2-1.jpg"
data-at-450="img/thumbs/2-1.jpg"
data-at-800="img/small/2-1.jpg"
data-at-1366="img/medium/2-1.jpg"
data-at-1920="img/big/2-1.jpg">
<img src="img/thumbs/2-1.jpg">
</a>
Создадим чанк tpl.image.row и с помощью PhpThumbOn отресайзим изображения:
<a href="[[+file]]" class="thumbnail"
data-at-450="[[+file:phpthumbon=`w=450&zc=1`]]"
data-at-800="[[+file:phpthumbon=`w=800&zc=1`]]"
data-at-1366="[[+file:phpthumbon=`w=1366&zc=1`]]"
data-at-1920="[[+file:phpthumbon=`w=1920&zc=1`]]">
<img src="[[+file:phpthumbon=`w=180&h=180&zc=1`]]" rel="lazyload">
</a>
Закачаем изображения в какой-нибудь каталог и выведем их с помощью сниппета Filedir и заключим его в контейнер с классом .gallery:
<div class="gallery">
[[filedir?
&dir=`assets/images/123/`
&tpl=`tpl.image.row`
]]
</div>
где assets/images/123/ - это путь к каталогу с изображениями.
Применим стили для нашего лайтбокса:
<link rel="stylesheet" href="css/baguetteBox.css">
Теперь остаётся вызвать в шаблоне сам скрипт и применить его к нашим изображениям:
<script src="js/baguetteBox.js" async=""></script>
<script type="text/javascript">
$(function() {
baguetteBox.run('.gallery');
});
</script>
На выходе у нас выйдут вертикальные изображения, можно немного добавить стилей или, так как я использую Bootstrap, добавить несколько классов для красивого отображения миниатюр.
Код шаблона будет следующим:
Код чанка tpl.image.row тоже немного поменяется:
Пишите внизу замечания и предложения. Публикуйте ссылки на ваши любимые ресайзеры или плагины для галерей (лайтбоксы).
Nov 25 2015 Frontend Twitter Bootstrap Виктор Матушевский