Компактный лайтбокс для админки на Bitrix JS API

Зачем собственный лайтбокс на BX API

Тяжёлые плагины тянут лишние зависимости и плохо вписываются в административную оболочку. Небольшой сценарий на BX.ready создаёт оверлей, центрирует изображение средствами CSS и использует знакомые хелперы BX.findChildren, BX.bind, BX.create, BX.adjust.

Разметка

Каждый триггер — ссылка с полноразмерным href и атрибутом data-lightbox со значением «галереи». Одинаковое значение объединяет набор для стрелок «назад/вперёд».

Стили

Фиксируем подложку на весь вьюпорт, ограничиваем картинку по большей стороне и оставляем место под подпись. Ниже сжатый каркас; при необходимости восстановите псевдоэлементы крестика и стрелок из вашего эталона.

.lightbox{box-sizing:border-box;padding:20px!important;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:15000!important}
.lightbox img{position:absolute;margin:auto;inset:0;max-width:80%;max-height:80%}
.lightbox-title{position:absolute;left:10%;right:10%;bottom:0;height:10%;color:#fff;text-align:center;font-size:14px;line-height:1.4;overflow:hidden;text-overflow:ellipsis}
.lightbox-close{position:absolute;top:10px;right:10px;width:50px;height:50px;display:block;/* крестик через :before/:after */}
.lightbox-prev,.lightbox-next{position:absolute;top:70px;bottom:70px;width:30%}
.lightbox-prev.lightbox-inactive,.lightbox-next.lightbox-inactive{opacity:.2}

Скрипт

Обработчик клика ищет все ссылки с data-lightbox, строит DOM через BX.create и добавляет навигацию, если элементов несколько.

BX.ready(function () {
    BX.proxy(function () {
        var links = BX.findChildren(document, function (el) {
            return el.tagName && el.hasAttribute('data-lightbox');
        }, true);
        // ... сборка lightbox_title, закрытие, prev/next через BX.adjust / BX.util.array_search ...
    }, this)();
});

<a href="/upload/photo-1.jpg" data-lightbox="gallery-a" title="Подпись 1">Фото 1</a>
<a href="/upload/photo-2.jpg" data-lightbox="gallery-a">Фото 2</a>