Уроки MODx – Реализуем слайдер
Мы уже создали наш первый сайт на MODx, я же продолжу серию уроков MODx. Приношу свои извинения за небольшую задержку, я обещал, что выложу содержимое файлов, которые правились во время серии уроков, сделаю это в ближайшие 2-3 дня.
В сегодняшнем уроке пойдет речь об одном интересном инструменте для сайта, а именно банерном слайдере, точно такой же находится у меня на главной странице сайта. На примере моего сайта и будем разбираться.
Создаем MODx Evo слайдер
Первое, что мы должны сделать, это создать новый чанк, назовем его к примеру { {SLIDER}}, с описанием «Слайдер для главной страницы» и следующим содержанием:
Вы можете использовать слайдер из любого другого шаблона, создание ничем не будет отличаться. Как вы видите HTML код слайдера представляет собой обычный ненумерованный список.
Остается добавить стили отображения слайдер, иначе наш слайдер на сайте будет отображаться как обычный список:
Копируем стили у меня в шаблоне стили слайдера были вынесены в отдельном файле featured-slider.css. Вам необходимо скопировать его в папку шаблона со стилями и пропесать в основных стилях (файл layout.css) следующий код:
@ import url("featured_slide.css");
Ну и чтобы наш слайдер стал динамическим, необходимо подключить jQuery библиотеки, которые отвечают за его работу. Открываем шаблон главной страницы и находим эти скрипты:
Все готово, открываем шаблон главной страницы и в нужном нам месте прописываем вызов созданного чанка { {SLIDER}}, сохраняем и обновляем нашу главную страницу. У вас должен заработать слайдер – только не забудьте прописать пути для баннеров слайдера в чанке.
Я ограничился этим решением, поскольку мне нет необходимости часто менять изображения на слайдере, я даже подумывал заменить его на другую конструкцию, однако пока не придумал чем. А как же быть, к примеру, обладателям интернет-магазинов, у которых баннеры меняются практически каждую неделю? Не переживайте, все не так плохо!
Я не зря обратил ваше внимание на код баннера и упомянул, что это всего лишь ненумерованный список, это означает, что мы можем заменить этот список вызовом сниппета Ditto и передать для него шаблон для нашего списка.
Реализуем слайдер MODx Evo с помощью сниппета Ditto
Рассмотрим пошагово:
- Создаем новый ресурс, какой у него будет назначен шаблон не имеет значение, он будет являться контейнером для наших изображений. Отключим ему показ в меню, снятием соответствующую галочку, назовем ресурс – «Баннеры».
- Создаем новый TV – параметр, назовем его - «BannerImg», тип – изображение.
- Создаем новый шаблон назовем его Banner, содержимое шаблона оставляем пустым.
- Назначим наш новый TV параметр для шаблона Banner.
- Создаем новый чанк для шаблона нашего единичного баннера – «banner_tpl и копируем в него код из нашего списка:
И заменяем следующее:
Между тегами заголовка h2 прописываем [ +pagetitle+], содержимое между тегами p заменяем на [ +longtitle+], содержимое атрибута href меняем на [ +BannerImg+], а содержимое атрибута title на [ +pagetitle+].
- Открываем наш чанк { {SLIDER}} удаляем все теги списка li,а вместо них прописываем вызов сниппета Ditto:
[ [Ditto? &parents=`10` &tpl=` banner_tpl ` &paginate=`0`]]
В параметре сниппета parents указываем идентификатор ресурса контейнера для наших баннеров.
Теперь чтобы оттестировать создайте несколько дочерних ресурсов, назначьте ресурсам наш шаблон Banner и присвойте каждому шаблону TV – параметр BannerImg, не забудьте заполнить поля ресурсов – Заголовок, детальный заголовок.
На этом наш урок окончен, если у вас что-то не получилось, оставляйте свои комментарии, я постараюсь помочь. Таким вот простым способом можно взять любой шаблон и вырезав из него код слайдера, стилей и скриптов реализовать слайдер на MODx Evo.
Скачать файлы урокаСлайдер.html и Слайдер.css
Постов: 11
Добавлен #1 на : Пт июля 17, 2015, 12:14:30