[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

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

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

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