Как создать фотогалерею Lightslider multiTV на MODx Evo

В данной статье-уроке рассматривается нижеприведенный пример создания адаптивной фотогалереи Lightslider MultiTV для CMS MODx Evo.




1. В системе должен быть установлен сниппет MultiTV, если он у Вас не установлен, инструкцию можно прочитать здесь, и на этой же странице можно скачать дистрибутив сниппета.

2. Скачайте дистрибутив галереи Lightslider MultiTV по этой ссылке.

3. Установите Lightslider MultiTV через PackageManager. Как установить PackageManager и скачать дистрибутив можно по ссылке.

4. В ходе установки установщиком были созданы чанки lightslider-css и lightslider-js, а также tv-параметр lightslider.

5. Создайте шаблон Lightslider MultiTV. В код шаблона добавьте следующий код:

– в теге <head> {{lightslider-css}}

– перед закрывающим </body> {{lightslider-js}}

6. Назначьте tv-параметр lightslider созданному шаблону Lightslider MultiTV.

7. Создайте ресурс с шаблоном Lightslider MultiTV для вывода фотогалереи. Добавьте в этот ресурс вызов сниппета MultiTV:

[[multiTV? &tvName=`lightslider` &display=`all`]]

8. Внизу ресурса должна появиться группа tv-параметров для данной галереи.

9. Добавьте несколько изображений и тексты в поля. Фото можно скачать здесь

10. Обновите страницу, на которой должна быть выведена галерея. 

11. Стили оформления галереи правим в файле lightslider.css из папки /assets/templates/common/js/lightslider/src/css/.

Дистрибутив адаптивной галереи Lightslider в исходном варианте можно скачать на странице Lightslider (адаптивный слайдер)

Документация по скрипту Lightslider
по адресу http://sachinchoolur.github.io/lightslider