[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%;
}

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

  1. Игорь 12 августа 2023, 12:58 # 0
    живьем на tsknnmgc.beget.tech проблема — вывод галереи с множеством альбомов

    Вызов галереи в блоке на странице********************

    ГАЛЕРЕЯ наших работ
    [[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`1` &rowTpl=`galAlbumRowWithCoverTpl`&thumbWidth=`400` &thumbHeight=`266`]]

    [[!Gallery? &album=`[[*galery_name]]` &limit=`0` &checkForRequestTagVar=`1`&sortby=`{«publishedon»:«ASC»}` &toPlaceholder=`Gallery`
    &useCss=`0` &containerTpl=`GalleryAlbumTpl1` itemCls=`carousel-item` activeCls=`carousel-item active` ]]

    [[+Gallery:isnot=``:then=`[[+Gallery]]`:else=`
      [[+GalleryAlbums]]
    `]]







    Выглядит результат — выводятся обложки альбомов и их названия… тут все гут… При клике по обложке альбома открывается в модалке картинка с этой же картинкой, что и на обложке… а должна открываться галерея – т.е. просмотр всех картинок, что вложены в альбом. FancyBox подключен и ранее (когда была простая галерея) уже проверял – все работало… Что не так… не понимаю ☹

    galAlbumRowWithCoverTpl *********************************

    [[+name]] ([[+total]])

    [[!Gallery? &album=`[[+id]]`&toPlaceholder=`photos`&thumbTpl=`tpl.gallery.image`]]
    <a href="[[+url:is=``:then=`[[+image]]`:else=`[[+url]]`]]" [[+link_attributes]] class=«gallery-preview» data-photos="[[+photos:commaSeparate]]">
    [[+image:notempty=`<img src="[[+image]]" [[+cls:notempty=`class="[[+cls]] "`]] alt="[[+title]]" />`]]



    GalItemThumb************************************

    <a href="[[+linkToImage:if=`[[+linkToImage]]`:is=`1`:then=`[[+image_absolute]]`:else=`[[~[[*id]]?
    &[[+imageGetParam]]=`[[+id]]`
    &[[+albumRequestVar]]=`[[+album]]`
    &[[+tagRequestVar]]=`[[+tag]]` ]]`]]" title="[[+name]]" [[+link_attributes]]>
    <img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" [[+image_attributes]] />



    GalleryAlbumTpl1******************************

    [[+thumbnails]]
    *Комментарий будет опубликован после проверки модератором

    Комментарии 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    getResources заготовки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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