Как создать фотогалерею Bxslider multiTV на MODx Evo
В данной статье-уроке рассматривается нижеприведенный пример создания адаптивной фотогалереи Bxslider MultiTV на MODx Evo.
1. В системе должен быть установлен сниппет MultiTV, если он у Вас не установлен, инструкцию можно прочитать здесь, и на этой же странице можно скачать дистрибутив сниппета.
2. Скачайте дистрибутив галереи Bxslider MultiTV по этой ссылке.
3. Установите Bxslider MultiTV через PackageManager. Как установить PackageManager и скачать дистрибутив можно по ссылке.
4. В ходе установки установщиком были созданы чанки bxslider-css и bxslider-js, а также tv-параметр bxslider.
5. Создайте шаблон Bxslider MultiTV. В код шаблона добавьте следующий код:
– в теге <head> {{bxslider-css}}
– перед закрывающим </body> {{bxslider-js}}
6. Назначьте tv-параметр bxslider созданному шаблону Bxslider MultiTV.
7. Создайте ресурс с шаблоном Bxslider MultiTV для вывода фотогалереи. Добавьте в этот ресурс вызов сниппета MultiTV:
[[multiTV? &tvName=`bxslider` &display=`all`]]
8. Внизу ресурса должна появиться группа tv-параметров для данной галереи.
9. Добавьте несколько изображений и тексты в поля. Фото можно скачать здесь.
10. Обновите страницу, на которой должна быть выведена галерея.
11. Стили оформления галереи правим в файле jquery.bxslider.css из папки assets/templates/common/js/bxslider.
Дистрибутив адаптивной галереи bxslider в исходном варианте от разработчика можно скачать на странице Jquery.bxslider (адаптивный слайдер).
Документация по скрипту bxslider
по адресу http://bxslider.com