Компактный лайтбокс галереи на jQuery и ссылка на вариант Bitrix JS API

Зачем отдельный лёгкий вариант

Тяжёлые плагины галерей усложняют доработку. Ниже — компактная связка CSS + jQuery: адаптивная подложка, подпись, закрытие и навигация по элементам одной галереи (data-lightbox).

Для проектов на ядре 1С‑Битрикс чаще уместна нативная версия на BX JS API без jQuery — см. нашу заметку Компактный лайтбокс для админки на Bitrix JS API; этот текст остаётся полезным там, где jQuery уже подключён шаблоном.

CSS (каркас)

.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;/* крестик :before/:after */}
.lightbox-prev,.lightbox-next{position:absolute;top:70px;bottom:70px;width:30%}
.lightbox-prev.lightbox-inactive,.lightbox-next.lightbox-inactive{opacity:.2}

Полный набор правил со стилизацией стрелок и крестика — как в оригинале; здесь оставлен сжатый каркас.

jQuery

$.fn.extend({
   lightBox: function(){
      $(this).each(function(){
         $(this).on('click', $.proxy(function(e) {
            e.preventDefault();
            var link = this, obLightBox, prev, next, title, gallery;
            if(!!$(this).data('lightbox'))
               gallery = $('[data-lightbox="'+$(this).data('lightbox')+'"]');
            // сборка контейнера, img, title, закрытие, prev/next, setNavActivity, navigate...
            $(document.body).append(obLightBox);
         }, this));
      });
   }
});
$('[data-lightbox]').lightBox();

HTML

<a href="/upload/a.jpg" data-lightbox="gallery1">1</a>
<a href="/upload/b.jpg" data-lightbox="gallery1">2</a>

Источник: перенос с блога g·rain·design.