Битрикс. Вывод изображений в компоненте Блог как в FancyBox

В 1С-Битрикс для открытия изображений во всплывающем окне можно использовать встроенную библиотеку:

BX.viewImageBind()

Это стандартный функционал Битрикс, который работает без подключения сторонних lightbox-библиотек.

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

<script>
BX.viewImageBind(
    'blg-post-<?=$CurPost["ID"]?>',
    {showTitle: false},
    {tag:'IMG', attr: 'data-bx-image'}
);
</script>

Что делает BX.viewImageBind

Метод:

BX.viewImageBind()

автоматически:

• находит изображения внутри блока;
• открывает их по клику;
• создает встроенный lightbox;
• показывает изображения поверх страницы.

Первый параметр

'blg-post-<?=$CurPost["ID"]?>'

Это:

• ID контейнера с изображениями.

Например:

<div id="blg-post-<?=$CurPost["ID"]?>">
    ...
</div>

Второй параметр

{showTitle: false}

Настройки просмотра изображения.

В данном случае:

• отключается вывод заголовка изображения.

Третий параметр

{tag:'IMG', attr: 'data-bx-image'}

Указывает:

• какие элементы обрабатывать;
• по какому атрибуту искать изображения.

Как должен выглядеть HTML

Для работы изображения должны иметь:

data-bx-image

Пример:

<div id="gallery">

    <img
        src="/upload/img.jpg"
        data-bx-image
        alt=""
    />

</div>

Полный пример

<div id="gallery">

    <img
        src="/upload/photo1.jpg"
        data-bx-image
        alt=""
    />

    <img
        src="/upload/photo2.jpg"
        data-bx-image
        alt=""
    />

</div>

<script>
BX.viewImageBind(
    'gallery',
    {showTitle: false},
    {tag:'IMG', attr:'data-bx-image'}
);
</script>

Преимущества BX.viewImageBind

• не нужно подключать jQuery;
• не нужен Fancybox;
• не нужен Lightbox;
• уже встроено в Битрикс;
• минимум JS-кода;
• работает быстро.

Когда удобно использовать

• галереи;
• новости;
• блог;
• портфолио;
• детальные страницы;
• фотографии товаров.

Важно подключение ядра Bitrix

Для работы:

BX.viewImageBind()

должно быть подключено:

main.core

Обычно в шаблоне Битрикс оно уже подключено автоматически.

Как проверить подключение BX

Откройте консоль браузера и выполните:

console.log(BX)

Если объект существует — библиотека подключена.

Итог

BX.viewImageBind() — простой встроенный способ сделать lightbox изображений в 1С-Битрикс без сторонних библиотек.

Достаточно:

• добавить data-bx-image;
• указать ID контейнера;
• вызвать BX.viewImageBind().