[MODX] Заготовки для работы

То, что лично я использую в почти ежедневно в работе. Удобно чтобы такие вещи были под рукой.

В title документа

[[*longtitle:isnot=``:then=`[[*longtitle]]`:else=`[[*pagetitle]] | [[++site_name]]`]]

Menutitle fix

[[+menutitle:isnot=``:then=`[[+menutitle]]`:else=`[[+pagetitle]]`]]

Текущий год

Скрипт для того чтобы на сайте всегда был актуальный год. Код миницицирован в одну строку.

<span id="thisyear">2016</span>
<script>function thisYear() {var d = new Date();var n = d.getFullYear();document.getElementById("thisyear").innerHTML = n;}thisYear();</script>

Любопытная конструкция для вывода текущего года в MODX:

[[!+nothing123:default=`now`:strtotime:date=`%Y`]]

Fancybox

//Строчка для активации Fancybox
$(document).ready(function(){
  $(".fancybox").fancybox();
});
// Восстановить форму после закрытия:
var popUpform = $('#popUpform').html();
$(".fancybox_popUpform").fancybox({
  afterClose: function(){
    $('#popUpform').html(popUpform);
  }
});

Обычный слайдер с помощью bxSlider

Пример структуры кода для bxSlider

<ul class="bxslider">
  <li><a href=""><img src="img/slider/slide1.jpg" alt="Слайд1"></a></li>
  <li><a href=""><img src="img/slider/slide2.jpg" alt="Слайд2"></a></li>
  <li><a href=""><img src="img/slider/slide3.jpg" alt="Слайд3"></a></li>
</ul>

Активация bxSlider

$(document).ready(function(){
	$('.bxslider').bxSlider({pager:false,auto:true});
});

Карусель с помощью bxSlider. При клике открывается Fancybox

Пример чанка для галлереи MODx (Используется пакеты Gallery и RezImgCrop):

<li><a href="[[+image_absolute:rezimgcrop=`r-1000`]]" class="fancybox" rel="album[[+album]]"><img src="[[+image_absolute:rezimgcrop=`r-x135`]]" alt="" /></a></li>

Активация карусели bxSlider

$('.image-carousel').bxSlider({
  minSlides: 5,
  maxSlides: 5,
  slideWidth: "auto",
  slideMargin: 10,
  pager:false
});

Продолжить автоматичекое листание после нажатие на стрелку пользователем

К сожалению, по-умолчанию bxSlider после такого остановится и не сдвинется с места. Решение ниже.

var slider = $('.bxslider').bxSlider({
  pause:'3000',
  auto:'true',
  mode:'fade',
  captions:false,
  pager:false,
  onSlideAfter: function() {
    slider.startAuto() // Эта строчка творит магию
  }
});

Использование getCache Modx

//Обычный вызов сниппета:
[[!getResources?
&parents=`[[*id]]`
&tpl=`element-tpl`
&sortby=`menuindex`
&sortdir=`ASC`
&limit=`100`
&depth=`0`
&includeTVs=`1`
]]
//Вызов сниппета с кэшированием через getCache:
[[!getCache?
&element=`getResources`
&cacheExpires=`1440`
&parents=`[[*id]]`
&tpl=`element-tpl`
&sortby=`menuindex`
&sortdir=`ASC`
&limit=`100`
&depth=`0`
&includeTVs=`1`
]]

Использование lightSlider

<ul class="myslider">
  <li data-thumb="house_1_small.jpg" data-src="/userimg/house_1_big.jpg">
    <img src="house_1_normal.jpg" />
  </li>
  <li data-thumb="house_2_small.jpg" data-src="/userimg/house_2_big.jpg">
    <img src="house_2_normal.jpg" />
  </li>
  <li data-thumb="house_3_small.jpg" data-src="/userimg/house_3_big.jpg">
    <img src="house_3_normal.jpg" />
  </li>
  <li data-thumb="house_4_small.jpg" data-src="/userimg/house_4_big.jpg">
    <img src="house_4_normal.jpg" />
  </li>
  <li data-thumb="house_5_small.jpg" data-src="/userimg/house_5_big.jpg">
    <img src="house_5_normal.jpg" />
  </li>
</ul>
<script>
$(".myslider").lightSlider({
  item:1,
  loop:true,
  gallery:true, // будут снизу превьюшки
  thumbItem:4, // кол-во превьюшек снизу
  slideMargin:0,
  enableDrag: false,
  adaptiveHeight:true,
  currentPagerPosition:'left',
  pause:5000,
  speed:1000,
  onSliderLoad: function(el) {el.lightGallery();} // врубить галерию (lightGallery)
});
</script>

Заметки и ссылки по теме:

  • WOWSlider — Очень красочный слайдер. Надо бы его изучить.
  • LightSlider — Возможная альтернатива для bxSlider. Есть простая реализация миниатюр под слайдером и еще несколько плюшек
  • lightGallery — Возможная альтернатива для Fancybox. Есть полноэкранный режим. Очень хорошо подходит для больших картинок, т.к. есть увеличение

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором

Похожие статьи

Генератор настроек MIGX

Документация на русском по MODX MIGX

pdoPage и getImageList - Постраничная навигация MIGX

Подсказки по работе и заготовки для MiniShop2

Импорт и экспорт в MiniShop2. Реализация 1

Как включить HTTPS (SSL) в MODX - Подробная инструкция

Генерация YML для выгрузки в маркет

Примеры работы с API MODX

Примеры выборки where, optionFilters, innerJoin

pThumb - ресайз изображений. Примеры использования.

Расширение свойств товаров minishop2

Примеры использования

Сайт на обслуживании (выключить сайт)

Добавить в письмо контактную информацию

Вывести getImageList только если он не пустой

Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

Оформление и настройка easyComm. Комментарии и отзывы на сайте.

Поиск на сайте с пакетом SimpleSearch

Подсчет и вывод количества потомков ресурса в MODX

Простая и симпатичная галерея fancybox

Галерея. Вывести обложки альбомов и фотографии

Вывод tv-параметров в формате -

Отредактировать письмо о заказе - добавить ТВ поле, или что-то еще

Quip для MODX. Более рабочий вариант

Сниппет для вывода размера и расширения файла

pdoResources Заготовки для работы

Простой аудио-плеер HTML5

Вывести список всех опций MiniShop2

Слайдер Slick slider в контенте ресурса

Как контролировать кэш CSS и скриптов

Изменить цену на товар в зависимости от количества при добавлении в корзину minishop2

Подключить MODX в стороннем PHP файле

Простейшая авторизация

Как создать ресурс процессором $modx->runProcessor('resource/create', $props)

Красивое адаптивное меню под pdoMenu

Массово обновить ТВ, или другое поле через базу

Сообщение о том, что сайт использует Cookie

Создать свою страницу в админке

Изменить формат номера заказа

Получить grandparent. Вывести родитель родителя

Симпатичный список файлов, загружаемых к ресурсу через MIGX

Установить шаблон по-умолчанию для новых, создаваемых ресурсов

Вывести все доступные плейсхолдеры

Отредактировать шаблон письма

Создать источник файлов

Добавить скрипт перед тегом body

Общая сумма по каждому товару в корзине Minishop2

Создать раздел с паролем на сайте MODX

Что делать если ее приходит почта администратору

Фильтрация по TV параметрам в msProducts

Дата на русском

FontAwesome - часто используемые иконки для шаблонов MODX

Создать пакет с пользовательской таблицей

Заготовки для работы

Загрузка сниппета после загрузки страницы через AjaxSnippet

Курсы валют с cbr.ru на PHP

getResources заготовки

Обязательный чекбокс при оформлении заказа

Обработка остатков заказа в miniShop2

Соответствие названия классов с названиями таблиц в MySQL

Разбить вывод pdoResources на несколько колонок (блоков)

Баннеры с использованием BannerY

Обновить alias (псевдоним) у всех ресурсов

CSS для постраничной навигации pdoPage

Вывести время загрузки (формирования) страницы

Расширить таблицу site_content (объект modResource) за 5 минут

Вырезать кавычки — фильтр-сниппет MODX

Счетчик посещений и скачиваний для сортировки ресурсов

Бесплатная доставка от 5000 рублей в MiniShop2

Динамическое поле emailSubject в FormIt

Скрыть информацию о том, что сайт работает на MODX

Отсортировать ресурсы по количеству комментариев Quip MODx

Изменить цену на товар, если в корзине лежит товар из особой категории minishop2

Создать редирект через autoRedirector API

Cортировать по списку id в pdoResources и pdoTools

Ответ для сервиса moneta.ru

Вывести 404 ошибку по настройке TV MODX

Email сделать не обязательным полем

Как разместить исходный код сниппета на сайте, в документации

Ускорить установку MODX revo до пары кликов

Постраничная навигация — набор параметров и CSS PdoPage

Сделать все элементы статичными для Git и IDE

Не работает подгрузка товаров ajax mfilter2 на мобильном

Сделать поле размер обязательным

Настройка стилей для комментариев Tickets

Подключить текстовой редактор к доп. полям ресурса

Динамическая замена шаблона ресурса - плагин

Кастомный чанк для AdminPanel

Разместить корзину внутри блока с оформлением заказа

Плагин для формирования замороженных URL с редиректом

xPDO Выборка из одной таблицы с зацепкой значения из другой

Приветственный экран / заглушка на сайт

Вложенные условия в xPDO MODX

Вывести список всех родителей в ТВ поле ресурса

Как получить данные пользователя сразу после авторизации через API

Вывести список всех емэйлов miniShop2

Если getParentIds не работает в плагине

Контролировать кэширование файлов CSS и JS MiniShop2

Не приходят / не отправляются письма - в чем причина?

Кэширование в MODX: использование $modx->cacheManager

Наш сайт использует куки, нажмите «ОК» если вы не против
OK