Реализация слайдера в MODX revolution при помощи сниппета getResources. Создание слайдера на modx

Создание слайдера в MODX при помощи BanerY

Сегодня небольшая статья о том как в MODX создать слайдер при помощи пакета BanerY. Данный пакет можете загрузить и установить с репозитория modstore.

Создание слайдера при помощи BanerY

И так есть статичный слайдер, пусть это будет обычный bootstrap слайдер, с вот такой разметкой:

<div data-ride="carousel">  <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>  <div role="listbox"> <div> <img src="img_chania.jpg" alt="Chania"> <div> <h4>Заголовок</h4> <p>Описание</p> </div> </div> <div> <img src="img_chania2.jpg" alt="Chania"> <div> <h4>Заголовок</h4> <p>Описание</p> </div> </div> <div> <img src="img_flower.jpg" alt="Flower"> <div> <h4>Заголовок</h4> <p>Описание</p> </div> </div> </div>  <a href="#myCarousel" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#myCarousel" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next</span> </a> </div>

<ol>

</ol>

<div>

<div>

<h4>Заголовок</h4>

<p>Описание</p>

</div>

<div>

<div>

<h4>Заголовок</h4>

<p>Описание</p>

</div>

<div>

<div>

<h4>Заголовок</h4>

<p>Описание</p>

</div>

<span>Previous</span>

</a>

</a>

</div>

Цель создать управляемый слайдер из этой разметки. Приступим.

Начнем пожалуй с создания слайдов в BannerY, для этого заходим в Приложения — BannerY — Позиции и создаем позицию (к примеру home-slider).

Создание позиции в BanerY

После этого переходим во вкладку Баннеры и нажимаем на кнопку Новый банер. Откроется окно создания нового банера.

Создание банера в BanerY

Заполняем все:

Название, его можно будет вывести при помощи [[+name]].

Выбираем изображение — [[+image]].
Указываем URL куда переходить — [[+url]].
Заполняем описание — [[+description]] — сюда к стати можно зарядить не только текст, но и обычный html, и это круто.
Ну и выбираем позицию (создали ее ранее).

И так создаем нужное количество слайдов.

Теперь нужно вышеприведенную разметку разбить на чанки и подогнать код в чанках под синтаксис BanerY

Создаем чанк для отдельного слайдера с классом active, пусть будет slide и внедряем в него синтаксис:

<div> <img src="[[+image]]" alt="[[+name]]"> <div> <h4>[[+name]]</h4> <p>[[+description]]</p> <p><a href="[[+url]]">Подробнее</a></p> </div> </div>

<div>

<div>

<p>[[+description]]</p>

<p><a href="[[+url]]">Подробнее</a></p>

</div>

Теперь копируем тот чанк и задаем ему имя slide2 и удаляем класс active

<div> <img src="[[+image]]" alt="[[+name]]"> <div> <h4>[[+name]]</h4> <p>[[+description]]</p> <p><a href="[[+url]]">Подробнее</a></p> </div> </div>

<div>

<div>

<p>[[+description]]</p>

<p><a href="[[+url]]">Подробнее</a></p>

</div>

Ну и остается по сути только вывести слайды.

[[BannerY? &position=`1` &tplFirst=`slide` &tpl=`slide2`]]

В итоге получаем следующее:

<ol>

</ol>

[[BannerY? &position=`1` &tplFirst=`slide` &tpl=`slide2`]]

</div>

<span>Previous</span>

</a>

</a>

</div>

Все) Вот так просто создать слайдер на modx при помощи BanerY.

Да к стати его документация находится вот здесь: docs.modx.pro/components/bannery/snippet

web-revenue.ru

3 урок Корпоративный сайт на MODX Revolution. Вывод изображений слайдера через TV поля, ТВ на MODX -

YouTube

Поддержать проект: http://www.donationalerts.ru/r/vasiliy_maksimov Здравствуйте, Друзья! В данном видео уроке мы выведем слайдер на главной странице нашего сайта, при помощи TV полей. Реализуем таким образом вывод изображений на MODX Revo. Ссылка на первый урок по созданию корпоративного сайта на MODX revolution: https://youtu.be/ncbK1n7sJds Также, у меня есть видео урок по переносу сайта на MODX с OpenServer на хостинг в интернете: https://youtu.be/3zePlFxnoU4 Также, есть видео урок по выводу новостей на MODX Revo, при помощи дополнения MIGX: https://youtu.be/I2-vTCE8mjY Если Вас интересует создание или продвижение сайта на MODX Revolution, обращайтесь по следующим контактам: [email protected]

Поддержать проект: http://www.donationalerts.ru/r/vasiliy_maksimov Здравствуйте, Друзья! В данном видео уроке мы выведем контент на главной странице нашего сайт

YouTube

In diesem Video zeige ich dir, wie du eine Slideshow in MODx (2.4 + ) erstellen kannst. Für mehr Making of und Videos um die Fotografie, abonniert diesen Kan

YouTube

★★★ Подпишись! https://www.youtube.com/user/theswat727?sub_confirmation=1 Привет ребятки. Начинаем знакомиться с одним из лучших скриптов адаптивного слайдер

YouTube

This video will help you to use nice marquee plugin in our Wordpress site.This is very simple and easy .

YouTube

Курс по MODX: https://goo.gl/pQcPHp Настраиваем MODX удобным образом.

YouTube

мини видео инструктаж по пользованию Сниппетом slideshow manager. Для конечного пользователя.

YouTube

MODx Revolution, getResources, tagLister, HitsPage. Делаем вывод статей, вывод популярных статей и поиск по тегам. Документация getResources на русском - http:/

YouTube

На вебинаре рассмотрим: - Интеграции html шаблона в систему управления. - Обзор часто используемых компонентов. - Настройка прав контент-менеджера.

YouTube

Мультизагрузка файлов к ресурсу MODX revolution http://marabar.ru

YouTube

Поддержать проект: http://www.donationalerts.ru/r/vasiliy_maksimov Здравствуйте, Друзья! В данном видео уроке мы создадим и настроим форму обратной связи на MOD

YouTube

Курс по MODX: https://goo.gl/pQcPHp В данном уроке рассматривается установка MODX Revolution на локальный веб-сервер. Подходит для новичков и всех, кто ни разу

YouTube

This is a video tutorial in MODX Revolution should you how to add a MIGXDB, with a custom schema, XPDO classes, and table creation. A custom manger page to view

YouTube

Цикл видео "Изучаю modx вместе с вами". Это видео лучше смотреть на скорости x2 Верстка: https://yadi.sk/d/SJFjxbH53P6VPK Ссылка на .htaccess: http://htaccess.

YouTube

Уроки MODx. Урок 6: Как добавить на сайт картинку Web-Sadovnik создание и продвижение сайтов Сайт: http://web-sadovnik.com Тел.:+7 (812) 981-189-7

YouTube

Сайт: http://promo-creative.com/ Так как урок записывал персонально для клиента, решил что и другим контент-менеджерам, SEO оптимизаторам и заказчикам, которые

YouTube

vimore.org

Реализация слайдера в MODX revolution при помощи сниппета getResources. | Разработка сайтов

Всем привет! Сегодня мы реализуем слайдер, мини-новости под слайдером и информационный блок на главной странице сайта при помощи сниппета getResources. Сниппет getResources у нас уже установлен, у кого нет — устанавливаем. Нам понадобится сама библиотека jQuery, последнюю версию качаем с сайта разработчика. На момент написания статьи, версия 1.9.1. Ещё нам понадобится плагин для управления слайдером, загружаем. Файлы скрипта, из скачанных архивов, закидываем в папку /assets/js/jquery/, изображения — в /assets/images/.

Что было уже сделано:

Подключение jQuery.

В слайдер мы будем загружать информацию с раздела >. Создайте несколько дочерних ресурсов. Первым делом подключаем библиотеку jQuery, для этого в чанке [[$head]] вставляем вызов: <script src="assets/js/jquery/jquery-1.9.1.min.js" type="text/javascript"></script> При использовании плагинов jQuery, первым в списке должен находится вызов самой библиотеки! Подключим плагин, для этого переходим в шаблон главной страницы, перед закрывающим тегом BODY вставляем код: <script src="assets/js/jquery/mobilyslider.js" type="text/javascript"></script> <script src="assets/js/jquery/init.js" type="text/javascript"></script> </body> Почему в конце страницы? Всё просто, скрипты исполняются браузером по мере нахождения, поэтому, сначала загружаем страницу, затем и подключаем галерею. В первом файле — mobilyslider.js, находится сам скрипт управления слайдером. Во втором init.js — настройки слайдера, можно открыть и посмотреть, возможные настройки прописаны в комментариях.

Изображения в слайдер мы будем подгружать через дополнительное поле phpthumb_img. Должны быть доступны шаблоны без сайт-бара.

Подключаем слайдер.

Я код шаблона немного переделал, т.к. плагин использует свои классы, прописанные в скрипте. Просто замените в чанке [[$slider]] до тега <hgroup> на мой, уже с вызовом getResources, я в комментариях к коду расскажу что сделал: <div> <div>  <div>  [[getResources?  &parents=`4`  &showHidden=`1`  &includeTVs=`1`  &limit=`6`  &tpl=`slider_tpl` ]] </div> </div> </div> Всё понятно — думаю, в комментария расписал, разбирать не будем. Теперь в файле /assets/css/style.css изменяем стили: /*Вместо этих стилей*/ /*#adbox div.images { float: right; display: inline-block; height: 281px; width: 710px; overflow: hidden; } #adbox div.images img.preview { float: left; margin-right: 2px; } #adbox div.images img.last { position: relative; top: -2px; } */ /*Вставляем этот*/ .sliderContent { width:100% !important; display:block; height:281px; clear:both; } .sliderContent .item { position:absolute; width:960px; } .sliderContent .text_item{ float:left; width:220px; position:absolute; padding: 40px 10px 40px 10px; } .sliderContent .text_item p { color: #646c6f; font-size: 14px; line-height: 20px; text-align: justify; } .sliderContent .text_item p span { color: #073f5a; display: block; font-size: 16px; line-height: 20px; padding: 0 0 20px; text-align: center; } .sliderContent .text_item a{ color: #0E2934; font-size: 14px; margin: 20px 0 0; padding-left: 120px; font-weight: bold; position: absolute; text-decoration: none; } .sliderContent .text_item a:hover{ color:#aeb4d4; } .sliderContent .img_item{ float: right; display: inline-block; height: 281px; width: 710px; overflow: hidden; } .sliderBullets { position:absolute; margin-top:-22px; padding:0 10px; z-index:50; } .sliderBullets a { display:block; float:left; text-indent:-9999px; outline:none; margin-left:5px; width:10px; height:10px; background:url('../images/tabs_1.png') no-repeat center center; } .sliderBullets a:hover, .sliderBullets .active { background: url('../images/tabs_2.png') no-repeat center center; } Вроде ничего не забыл, если что-то не так, спрашивайте в комментариях.

В вызове getResources мы подключили чанк [[$slider_tpl]] с шаблоном — создайте его. Наш шаблончик будет иметь такой вид:

[[+tv.phpthumb_img:notempty=` <div> <div> <p><span>[[+longtitle]]</span>[[+description]]</p> <a href="[[++site_url]][[~[[+id]]]]" title="[[+pagetitle]]">Подробнее »»</a> </div> <div> <a href="[[~[[+id]]]]" title="[[+pagetitle]]"><img src="[[+tv.phpthumb_img:phpthumbof=`w=710&h=281&zc=1`]]" title="[[+longtitle]]" alt="[[+longtitle]]" /></a> </div> </div>` ]] Обратили внимание на :notempty? Если в предыдущей статье мы закрывали только тег IMG в связи с отсутствием картинки и публиковали только текст, то в слайдере мы пункт закрываем полностью. Согласитесь, выводить один текст в слайдер глупо)). Поэтому, если по каким то причинам отсутствует изображение, то этот ресурс показываться не будет. Что ещё можно сказать, по умолчанию сниппет отображает 5 ресурсов, я задал лимит в шесть, если вам нужно больше — просто установите &limit=`свой_лимит`. Только не переусердствуйте, текстовый блок имеет ширину в 220px. Для запуска слайдера, необходимо создать дочерние документы у ресурса Предложения и загрузить картинки к ресурсам. По образцу главной страницы блога — реализовать многостраничность.

Подключаем мини-новости.

Подключение сниппета getResources для мини-новостей мало чем отличается, поместите между тегами UL: <ul> [[getResources? &parents=`3` &showHiden=`1` &includeTVs=`1` &limit=`3` &tpl=`mini_news` ]] </ul> Здесь, я указал раздел сайта — Услуги, как родительский ресурс. Лимит на отображение, естественно три. Создадим чанк mini_news, код: <li><a href="[[++site_url]][[~[[+id]]]]" title="[[+pagetitle]]"><img src="[[+tv.phpthumb_img:phpthumbof=`w=82`]]" title="[[+longtitle]]" alt="[[+longtitle]]" /></a> <p> <a href="[[++site_url]][[~[[+id]]]]" title="[[+longtitle]]">[[+pagetitle]]</a> [[+description:ellipsis=`50`]] </p> </li> Изображение в мини-новостях, в оригинале, у нас имеет размер 88х88 рх. Но, так как я добавил рамку в 1рх и 2рх внутренний отступ изображения, то уменьшаем размер изображения на 6рх — две стороны в сумме дают 6рх. Иначе слайдер будет наезжать на мини-новости. Добавим стилей для фото: #adbox hgroup.footer ul li img { padding: 2px; border:solid 1px #646c6f; background: #fff; } В заголовок будет подставляться заголовок из выводимого ресурса, в описание — описание ресурса description. Текстовый раздел очень ограничен в отображении знаков, поэтому добавляем фильтр — [[+description:ellipsis=`50`]]. Что это значит. Это значит, что текст будет ограничен и обрезаться, после пятидесятого знака — будет добавлено многоточие. По умолчанию 100. Без многоточия фильтр будет такой: [[+description:limit=`50`]]. Теперь создаём дочерние ресурсы у раздела > и загружаем изображения. Ресурсы должны использовать соответствующий шаблон, быть опубликованы и снята галочка с <<Не показывать в меню>>. Так мы сможем манипулировать, какие три последних ресурса будут доступны в разделе мини-новостей.

Ну что же, реализуем многостраничность для этих двух разделов.

GetPage — многостраничность.

Реализация многостраничности у разделов <<Услуги>> и <<Предложения>> идентична, поэтому рассказываю по примеру одного, подразумеваем оба). Создадим чанк [[$pagination]]

Имя — pagination
Категория — Контент
Описание — Многостраничность для ресурсов, использующие шаблон без сайт-бара. Подключается в вызове getPage, в ресурсе-контейнере соответствующего раздела.

Код: <hr /> [[!getPage? &element=`getResources` &limit=`10` &showHidden=`1` &hideContainers=`1` &includeTVs=`1` &tpl=`tpl_anons_2` &pageLimit=`3` &pageFirstTpl=`<li><a[[+classes]][[+title]] href="[[+href]]">Первая</a></li>` &pageLastTpl=`<li><a[[+classes]][[+title]] href="[[+href]]">Последняя</a></li>` ]] <div> <ul> <li>Страница [[+page]] из [[+pageCount]]</li> [[!+page.nav]] </ul> </div> Всё стандартно, мы это уже делали, описывать не буду. Для подключения чанка, открываем ресурс > и переходим на вкладку <<Настройки>> — снимаем галочку с <<Использовать HTML-редактор>>. Сохраняем и перезагружаем страницу, в разделе > вставляем: [[$pagination]] Создаём ещё один чанк — [[$tpl_anons_2]] с шаблонном анонса для главных страниц без сайт-бара. Код: <h5>[[+longtitle]]</h5> <div> [[+tv.phpthumb_img:notempty=`<img src="[[+tv.phpthumb_img]]" title="[[+longtitle]]" alt="[[+longtitle]]" />`]] <p>[[+introtext]]</p> <p><a title="[[+pagetitle]]" href="[[++site_url]][[~[[+id]]]]">Читать дальше »</a></p> <p>[[+publishedon:strtotime:date=`%d. %m. %Yг.`]]</p> </div><hr /><br /> Поправляем стили: /*Где нибудь в самом верху файла добавляем*/ .clear{clear:both;} /*Вместо этих стилей*/ /*------------------------------ Services Page ------------------------------*/ /*#services p { clear: both; } #services img { float: left; margin: 0 40px 20px 0; } #services ul { color: #646c6f; padding: 0; } #services ul li { font-size: 14px; line-height: 20px; padding: 0 0 20px; text-align: justify; } */ /*Добавляем свои*/ #services h4 a{ margin: 0 0 20px; text-transform: none; } #services h4 a{ color: #0e2934; text-decoration: none; }

Информационный блок.

В информационный блок мы будем выводить информацию, с раздела <<Информация>>. Создадим новый ресурс и отметим поля: Не опубликован, Не показывать в меню и шаблон без сайт-бара. Дочерние документы должны быть опубликованы, не показываться в меню и использовать шаблон для внутренних страниц блога. Дочерних документов будет четыре. Как-то так).

Далее, откроем чанк [[$content_index]] для редактирования и между тегами UL поместим вызов сниппета getResources

<span>[[*description]]</span> <ul> [[getResources? &parents=`20` &showHiden=`1` &includeTVs=`1` &limit=`4` &tpl=`info` ]] </ul> В [[*description]] будет подставляться текст из поля > главной страницы сайта. Создаём новый чанк [[$info]] с шаблончиком для вывода информации в информационный блок главной страницы <li> <a href="[[++site_url]][[~[[+id]]]]" title="[[+longtitle]]"><img src="[[+tv.phpthumb_img:phpthumbof=`w=105`]]" alt="[[+longtitle]]" /><h5>[[+longtitle]]</h5></a> <p>[[+description:ellipsis]]</p> </li> Как вы помните, фильтр ограничения длины текста имеет параметр — по умолчанию 100 знаков, поэтому :ellipsis мы оставляем пустым. 100 знаков — то что нужно. Теперь осталось заполнить дочерние документы и загрузить нужные фотографии и поправим стили, вернее удалим ограничение высоты информационного блока. В разделе /** MAIN **/ файла style.css находим такие строки и удаляем: #main ul { display: inline-block; list-style: none; /*height: 355px;*/ /*Удаляем!*/ margin: 0; padding: 0; } На данный момент, дерево ресурсов выглядит так:

На этом всё, главная страница сайта оформлена.

В следующей статье мы вернёмся в блог и реализуем систему комментирования.

Публикации по теме.

marabar.ru

[Modx Evo] Слайдер на MODx через сниппет от Василисы Белозеровой

Скачиваем сниппет
Распаковываем, файлы js кидаем в папку assets/js/
Создаем новы сниппет с названием FancyTransitions , закидываем содержимое скаченного файла
Создаем чанк {{slidesow}} с содержанием
[!FancyTransitions? &tpl=`kartink`!]
Создаем чанк {{kartink}} с содержанием
<img src='assets/images/001.jpg' alt='название ' /><a href ='[~2~]'> </a> <img src='assets/images/002.jpg' alt='название' /> <a href ='[~2~]'> </a> <img src='assets/images/003.jpg' alt='название' /> <a href ='[~2~]'> </a>
Загружаем картинки assets/images/
Все

Все, слайдер на modx готов.

Параметры, которые меняются в коде сниппета

$effect = (isset($effect)) ? $effect : 'zipper'; // wave, zipper, curtain // волны, молнии, занавес
$width = (isset($width)) ? $width : 480; // width of panel // ширина панели
$height = (isset($height)) ? $height : 270; // height of panel // высота панели
$strips = (isset($strips)) ? $strips : 20; // number of strips / /количество полос
$delay = (isset($delay)) ? $delay : 5000; // delay between images in ms / /задержка между изображениями в формате ms
$stripDelay = (isset($stripDelay)) ? $stripDelay : 50; // delay beetwen strips in ms / /задержка между полос в ms
$titleOpacity = (isset($titleOpacity)) ? $titleOpacity : '0.7'; // opacity of title // непрозрачность название
$titleSpeed = (isset($titleSpeed)) ? $titleSpeed : 1000; // speed of title appereance in ms // скорость название appereance в ms
$position = (isset($position)) ? $position : 'alternate'; // top, bottom, alternate, curtain // сверху, снизу, заместителей, занавес
$direction = (isset($direction)) ? $direction : 'fountainAlternate'; // left, right, alternate, random, fountain, fountainAlternate // влево, вправо, другие, случайные, фонтан, фонтанальтернативный
$navigation = (isset($navigation)) ? $navigation : 'false'; // prev and next navigation buttons // вкл и выкл кнопки навигации
$links = (isset($links)) ? $links : 'false'; // show images as links // вкл, выкл ссылки с изображения

yotadom.com