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

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


Описание изображения 1 Описание изображения 2 Описание изображения 3 Описание изображения 4

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

2. Скачать дистрибутив галереи NivoSlider MultiTV можно здесь.

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

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

5. Создайте шаблон NivoSlider MultiTV. В код шаблона перед закрывающим </body> добавьте следующий код:

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

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

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

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

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

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

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

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

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

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

Источник:
http://www.tattoocms.it/extras/multitvs/nivoslider-multitv-for-modx-evolution.html