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

Результат:

С применением MIGX и пакета rezimgcrop

Если сайт не на MODX или не нужен MIGX, то можно этот пункт пропустить. Просто обратите внимание на чанки.

Устанавливаем пакеты MIGX и rezimgcrop.

Создаем в Генераторе MIGX простейший ТВ-параметр, где будет только один плейсхолдер — [[+image]] (называем его migx_image_in_content).

Чанк migx_image_in_content_tpl

    

Чанк migx_image_in_content_wr_tpl

Важный бонус применения &wrapperTpl — Если ТВ-параметр будет пустой, то обертка не будет выведена.



[[+output]]

Вызываем getImageList:

[[!getImageList?
	&tvname=`migx_image_in_content`
	&tpl=`migx_image_in_content_tpl`
	&wrapperTpl=`migx_image_in_content_wr_tpl`
	&docid=`[[*id]]`
	&limit=`999`
]]

Активация Fancybox


CSS

.image_in_content_wr{
    margin: 20px 0 0;
}
.image_in_content_item a{
    display: block;
    width: 100%;
    position: relative;
    height: 165px;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50%;
    margin-bottom: 20px;
}
.image_in_content_item a:after{
    content: '';
    position: absolute;
    opacity: 0.8;
    top:85%;
    right: 25px;
    height: 32px;
    width: 32px;
    margin-right: -16px;
    margin-top: -16px;
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyOTkuOTk4IDI5OS45OTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI5OS45OTggMjk5Ljk5ODsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPgo8Zz4KCTxnPgoJCTxnPgoJCQk8cGF0aCBkPSJNMTM5LjQxNCw5Ni4xOTNjLTIyLjY3MywwLTQxLjA1NiwxOC4zODktNDEuMDU2LDQxLjA2MmMwLDIyLjY3OCwxOC4zODMsNDEuMDYyLDQxLjA1Niw0MS4wNjIgICAgIGMyMi42NzgsMCw0MS4wNTktMTguMzgzLDQxLjA1OS00MS4wNjJDMTgwLjQ3NCwxMTQuNTgyLDE2Mi4wOTQsOTYuMTkzLDEzOS40MTQsOTYuMTkzeiBNMTU5LjI1NSwxNDYuOTcxaC0xMi4wNnYxMi4wNiAgICAgYzAsNC4yOTgtMy40ODMsNy43ODEtNy43ODEsNy43ODFjLTQuMjk4LDAtNy43ODEtMy40ODMtNy43ODEtNy43ODF2LTEyLjA2aC0xMi4wNmMtNC4yOTgsMC03Ljc4MS0zLjQ4My03Ljc4MS03Ljc4MSAgICAgYzAtNC4yOTgsMy40ODMtNy43ODEsNy43ODEtNy43ODFoMTIuMDZ2LTEyLjA2M2MwLTQuMjk4LDMuNDgzLTcuNzgxLDcuNzgxLTcuNzgxYzQuMjk4LDAsNy43ODEsMy40ODMsNy43ODEsNy43ODF2MTIuMDYzaDEyLjA2ICAgICBjNC4yOTgsMCw3Ljc4MSwzLjQ4Myw3Ljc4MSw3Ljc4MUMxNjcuMDM2LDE0My40ODgsMTYzLjU1NSwxNDYuOTcxLDE1OS4yNTUsMTQ2Ljk3MXoiIGZpbGw9IiNGRkZGRkYiLz4KCQkJPHBhdGggZD0iTTE0OS45OTcsMEM2Ny4xNTcsMCwwLjAwMSw2Ny4xNTgsMC4wMDEsMTQ5Ljk5NXM2Ny4xNTYsMTUwLjAwMywxNDkuOTk1LDE1MC4wMDNzMTUwLTY3LjE2MywxNTAtMTUwLjAwMyAgICAgUzIzMi44MzYsMCwxNDkuOTk3LDB6IE0yMjUuNDM4LDIyMS4yNTRjLTIuMzcxLDIuMzc2LTUuNDgsMy41NjEtOC41OSwzLjU2MXMtNi4yMTctMS4xODUtOC41OTMtMy41NjFsLTM0LjE0NS0zNC4xNDcgICAgIGMtOS44MzcsNi44NjMtMjEuNzk0LDEwLjg5Ni0zNC42OTcsMTAuODk2Yy0zMy41NDgsMC02MC43NDItMjcuMTk2LTYwLjc0Mi02MC43NDRjMC0zMy41NDgsMjcuMTk0LTYwLjc0Miw2MC43NDItNjAuNzQyICAgICBjMzMuNTQ4LDAsNjAuNzQ0LDI3LjE5NCw2MC43NDQsNjAuNzM5YzAsMTEuODU1LTMuNDA4LDIyLjkwOS05LjI4LDMyLjI1NmwzNC41NiwzNC41NjIgICAgIEMyMzAuMTg1LDIwOC44MTcsMjMwLjE4NSwyMTYuNTEyLDIyNS40MzgsMjIxLjI1NHoiIGZpbGw9IiNGRkZGRkYiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.image_in_content_item a:hover:after{
    top:50%;
    right:50%;
}
Способ поблагодарить автора сайта:

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

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

Комментарии easyComm

Алексей 15 мая 2018, 20:48

Проблема в активации fancybox

вот как должно быть:
<script>
$(document).ready(function(){
$(".image_in_content_item").find(".fancybox").fancybox();
});
</script>

Администратор

Согласен, так мы более конкретно обозначаем элемент и избегаем возможных конфликтов. Хотя работать будет и более общий способ, указанный в статье. Иногда бывает удобно просто определить класс, которые всегда и везде по сайту будет активировать fancybox.

Amsterdam 12 апреля 2018, 14:47

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

Во первых, rezimgcrop, старый плагин. Зачем? Есть phpThumbOn или хотя бы Off
Во вторых, миниатюра задана как бэкграунд, это вообще, финт ушами) Не понятно для чего. Нужно создать миниатюру как Img, вставив в "а", который по клику будет открывать большое изображение.
ну и в третьих, галарея на MIGx в отсутствии этой самой пагинации, в принципе не лучший вариант)

Amsterdam 12 апреля 2018, 12:32

"Не очень понятно что вы хотите реализовать.."

Ну смотрите, при добавлении элементов MIGx в админке, они выстраиваются один под другим, строками. Когда строк 10 или 15, это еще приемлемо, а если элементов, а соответственно и строк, будет больше.. Тут уже пригодилась бы пагинация. Вопрос - как ее реализовать

Администратор

Я никогда не решал такого рода задачу. Как простое полу-решение — установите порядок сортировки ТВ-параметра так, чтобы он отображался ниже всех других полей..
На вопрос о пагинации разработчик MIGX (Bruno17) Ответил "Нет, нельзя, но это возможно в типе ТВ MIGXdb". Но с ним я уже никогда не работал и сказать не могу.
Вот тот вопрос и обсуждение — https://forums.modx.com/thread/97017/how-i-can-paginate-migx-fields-in-backend
Кстати, напишите пожалуйста, получилось ли у вас реализовать функционал по это инструкции, а то тут пишут, что "не работает", и других отзывов нет..

Amsterdam 12 апреля 2018, 05:46

Хорошо, но как сделать пагинацию в админке, что бы разбить загружаемые файлы на страницы? Нет такого решения на MIGx ?

Администратор

Не очень понятно что вы хотите реализовать..

Кирилл 17 марта 2018, 22:40

Не выводит изображение. Все по инструкции делаю.

[MODx] Подсказки по API

[MODx] minishop2 tips

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

Преобразовать JSON в HTML

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

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

[MODX, pdoCrumbs] Вывести список всех родителей в ТВ поле ресурса

[JS] Связать значения инпутов через jQuery (биндинг)

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

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

[OpenCart 1.5.1] Массово изменить адреса картинок у товаров

Вывести список всех файлов на сервере (и размер файла)

[PHP] Фиксированная сортировка массива на основе хэша

Курсы валют с cbr.ru на PHP, с запасным вариантом и кэшированием

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

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

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

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

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

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

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

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

[PHP] Узнать скорость выполнения кода. Простой таймер PHP

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

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

[MODX, MiniShop2] Отредактировать шаблон письма

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

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

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

[JS] Маска для ввода телефона +7(___)___-__-__

[MODX, MiniShop2] Добавить в письмо контактную информацию

[MODX, MiniShop2] Email сделать не обязательным полем

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

[MODX, MiniShop2] Изменить формат номера заказа

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

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

reCaptcha не через форму (без тега <form>)

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

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

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

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

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

Передать файл с одного на другой сервер

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

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

[MODX, MIGX] Простейшая авторизация

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

[MODX] Узнать размер файла

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

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

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

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

[MODX, MIGX] Вывести getImageList только если он не пустой

Bxslider отображение картинок после полной загрузки слайдера

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

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

[MODX, MIGX] Простой аудио-плеер HTML5

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

[OpenCart] Вывести на главную все категории с картинками

[PHP] Получить древовидный массив за один запрос к базе

Вырезать кавычки - фильтр MODx

Регулярное выражение

[MODx] Генератор настроек MIGX

[MODx, MIGx] Документация на русском по MIGx

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

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

[MODx,MiniShop2] Не приходит почта администратору

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

[Opencart] Вернуть английский язык, если вы его удалили

Универсальная форма обратной связи — feedBackForm

[MODx, miniShop2] Генерация YML для выгрузки в маркет

Редиректы

[MODx] pdoPage pagination css

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

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

[MODx, minishop] Фильтрация по TV параметрам в msProducts

Регулярные выражения notepad++ примеры

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

[JS] Заготовочки

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

[MODx, XML] Ответ для сервиса moneta.ru

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

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

[PHP] Простое логирование

[OpenCart] Вывести модуль напрямую через контроллер

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

[MODx, MIGX] Примеры использования

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

[Opencart, FilterPro] Не работает пагинация

[OpenCart] Заготовки для автоматического заполнения товарами магазина 1.5.5.1.2

[PHP] Разные фишки, заготовки

[PHP, JSON] Пример перевода с помощью Yandex Translate API

[MySQL] Примеры запросов

[MODx] Вывод tv-параметров в формате [название TV] - [значение TV]

[MODx] Дата на русском

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

[Opencart] API tips

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

[PHP] Загрузить файл для постобработки

[Opencart 2] Показывать в категориях

[MODx, Quip] Более рабочий вариант.

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

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

[MODx] getResources заготовки

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

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

Удалить HTML-теги span, и стили из тега br

Полезные ссылки

Все записи