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