Контакты | E-mail: info@modx-evo.ru | Заказать обратный звонок



Уроки MODx – Реализуем слайдер

Мы уже создали наш первый сайт на MODx, я же продолжу серию уроков MODx. Приношу свои извинения за небольшую задержку, я обещал, что выложу содержимое файлов, которые правились во время серии уроков, сделаю это в ближайшие 2-3 дня.

В сегодняшнем уроке пойдет речь об одном интересном инструменте для сайта, а именно банерном слайдере, точно такой же находится у меня на главной странице сайта. На примере моего сайта и будем разбираться.

modx слайдер

Создаем MODx Evo слайдер

Первое, что мы должны сделать, это создать новый чанк, назовем его к примеру { {SLIDER}}, с описанием «Слайдер для главной страницы» и следующим содержанием:

слайдер modx

Вы можете использовать слайдер из любого другого шаблона, создание ничем не будет отличаться. Как вы видите HTML код слайдера представляет собой обычный ненумерованный список.

Остается добавить стили отображения слайдер, иначе наш слайдер на сайте будет отображаться как обычный список:

modx evo слайдер

Копируем стили у меня в шаблоне стили слайдера были вынесены в отдельном файле featured-slider.css. Вам необходимо скопировать его в папку шаблона со стилями и пропесать в основных стилях (файл layout.css) следующий код:

@ import url("featured_slide.css");

Ну и чтобы наш слайдер стал динамическим, необходимо подключить jQuery библиотеки, которые отвечают за его работу. Открываем шаблон главной страницы и находим эти скрипты:

слайдер modx evo

Все готово, открываем шаблон главной страницы и в нужном нам месте прописываем вызов созданного чанка { {SLIDER}}, сохраняем и обновляем нашу главную страницу. У вас должен заработать слайдер – только не забудьте прописать пути для баннеров слайдера в чанке.

Я ограничился этим решением, поскольку мне нет необходимости часто менять изображения на слайдере, я даже подумывал заменить его на другую конструкцию, однако пока не придумал чем. А как же быть, к примеру, обладателям интернет-магазинов, у которых баннеры меняются практически каждую неделю? Не переживайте, все не так плохо!

Я не зря обратил ваше внимание на код баннера и упомянул, что это всего лишь ненумерованный список, это означает, что мы можем заменить этот список вызовом сниппета Ditto и передать для него шаблон для нашего списка.

Реализуем слайдер MODx Evo с помощью сниппета Ditto

Рассмотрим пошагово:

  1. Создаем новый ресурс, какой у него будет назначен шаблон не имеет значение, он будет являться контейнером для наших изображений. Отключим ему показ в меню, снятием соответствующую галочку, назовем ресурс – «Баннеры».
  2. Создаем новый TV – параметр, назовем его - «BannerImg», тип – изображение.
  3. Создаем новый шаблон назовем его Banner, содержимое шаблона оставляем пустым.
  4. Назначим наш новый TV параметр для шаблона Banner.
  5. Создаем новый чанк для шаблона нашего единичного баннера – «banner_tpl и копируем в него код из нашего списка:

    modx слайдер

    И заменяем следующее:

    Между тегами заголовка h2 прописываем [ +pagetitle+], содержимое между тегами p заменяем на [ +longtitle+], содержимое атрибута href меняем на [ +BannerImg+], а содержимое атрибута title на [ +pagetitle+].

  6. Открываем наш чанк { {SLIDER}} удаляем все теги списка li,а вместо них прописываем вызов сниппета Ditto:

[ [Ditto? &parents=`10` &tpl=` banner_tpl ` &paginate=`0`]]

В параметре сниппета parents указываем идентификатор ресурса контейнера для наших баннеров.

Теперь чтобы оттестировать создайте несколько дочерних ресурсов, назначьте ресурсам наш шаблон Banner и присвойте каждому шаблону TV – параметр BannerImg, не забудьте заполнить поля ресурсов – Заголовок, детальный заголовок.

На этом наш урок окончен, если у вас что-то не получилось, оставляйте свои комментарии, я постараюсь помочь. Таким вот простым способом можно взять любой шаблон и вырезав из него код слайдера, стилей и скриптов реализовать слайдер на MODx Evo.

Скачать файлы урокаСлайдер.html и Слайдер.css


Просмотров: 8193


Статьи по теме:


Написать комментарий

Поля помеченные * обязательны для заполнения.


Евгений
Постов: 9
Comment
Скачать
Добавлен #1 на : Пт. Июль 17, 2015, 12:14:30
Добрый день! А где скачать то что вы скринами вставили?
admin
Постов: 5
Comment
Скачать
Добавлен #2 на : Сб. Июль 18, 2015, 16:53:14
Прикрепил файлы в конце.
Константин
Постов: 9
Comment
Скачать
Добавлен #3 на : Чт. Ноябрь 19, 2015, 12:25:47
Добрый День, а можете перезалить файл css ? а то не открывает, либо на эл.почту прислать
admin
Постов: 5
Comment
Re:: Константин
Добавлен #4 на : Чт. Март 24, 2016, 12:32:31
Сделаем!
Ирина Викторовна
Постов: 9
Comment
Продвижение сайта
Добавлен #5 на : Вс. Май 29, 2016, 19:35:28
Скажите а занимаетесь ли вы продвижением?
Отредактирован: Июнь 09, 2016, 17:51:15 admin  
admin
Постов: 5
Comment
Re::Продвижение сайта
Добавлен #6 на : Чт. Июнь 09, 2016, 17:51:38
Да, занимаемся!
Дмитрий
Постов: 9
Comment
Не получилось
Добавлен #7 на : Вт. Июль 05, 2016, 16:17:54
Добрый день! Помогите пожалуйста, сделал все как у Вас, но ничего не работает( Перепроверил все на 100 раз.
Дмитрий
Постов: 9
Comment
Помогите пожалуйста
Добавлен #8 на : Вт. Июль 05, 2016, 16:58:02
Установил Ditto, вместо элементов слайдера пигет &tpl either does not contain any placeholders or is an invalid chunk name, code block, or filename. Please check it.
Дмитрий
Постов: 9
Comment
Не получилось
Добавлен #9 на : Вт. Июль 05, 2016, 18:56:13
Вроде получилось, но список элементов слайдера выводится в столбик. Скрипты 100% подключил
admin
Постов: 5
Comment
Re::Не получилось
Добавлен #10 на : Ср. Июль 06, 2016, 14:15:18
Ответил на почту
Таня
Постов: 9
Comment
Re: статья
Добавлен #11 на : Вс. Сентябрь 11, 2016, 09:25:46
Не работает ссылка Слайдер.css
Константин
Постов: 9
Comment
Стиль слайдера css
Добавлен #12 на : Пн. Май 29, 2017, 04:18:30
Не знаю, что здесь за разработчики, что не могут из ресурсов css вытянуть. Держите в таком виде, если своими руками не можете.
Отредактирован: Май 30, 2017, 07:52:20 admin  
admin
Постов: 5
Comment
Re::Константин
Добавлен #13 на : Вт. Май 30, 2017, 07:53:22
Константин, поправили файл, но все равно спасибо...
Константин
Постов: 9
Comment
Стиль слайдера css
Добавлен #14 на : Вт. Июнь 06, 2017, 03:19:21
Не знаю, что здесь за разработчики, что не могут из ресурсов css вытянуть. Держите в таком виде, если своими руками не можете.

@charset "utf-8";

#featured_slide{display:block; width:630px; height:385px; margin:0; padding:0; overflow:hidden; font-family:Georgia, "Times New Roman", Times, serif;}
#featured_slide a{color:#FFFFFF; background-color:transparent;}
#featured_slide a, #featured_slide ul, #featured_slide img{margin:0; padding:0; border:none; outline:none; list-style:none; text-decoration:none;}
#featured_slide ul{margin:15px 0 0 0;}
#featured_slide h1, #featured_slide h2, #featured_slide h3, #featured_slide h4, #featured_slide h5, #featured_slide h6, #featured_slide p{margin:0 0 4px 0; padding:0; line-height:normal; font-size:20px; font-weight:normal;}
#featured_slide a{color:#059AD8; background-color:transparent; font-weight:normal;}
#featured_slide p{margin:0; font-size:14px;}

.gallery{color:#000; background:#EFEFEF; padding:15px;}

.loader{background:url("../scripts/galleryviewthemes/loader.gif") center center no-repeat;}

.panel .panel-overlay, .panel .overlay-background{height:60px; padding:10px;}
.panel .overlay-background{background:#222;}
.panel .panel-overlay{color:white; font-size:0.7em;}
.panel .panel-overlay a{color:white; text-decoration:underline; font-weight:bold;}

.filmstrip{margin:15px 0 0 0; padding:0;}
.filmstrip .img_wrap{margin:0; padding:0;}

.frame{}
.frame .img_wrap{border:1px solid #aaa;}
.frame.current .img_wrap{border-color:#000;}
.frame img{border:none;}
.frame .caption{text-align:center; color:#888;}
.frame.current .caption{color:#000;}

.pointer{border-color:#000;}

Будь в курсе!

Введите Ваш Email и имя.

Digital Newsletter

Чтобы отписаться нажмите сюда ».