Как сделать увеличение картинок в битрикс по клику.

Для этого воспользуемся LightBox.

Скачать его и почитать инструкцию на английском можно по этой ссылке.

Инструкция для установки

Установка:

  1. Скачиваем дистрибутив по этой ссылке. Распаковываем его.

    Нам нужны вот эти 2 файла lightbox.css, lightbox.js и папка Images.

    Файл lightbox.css закачиваем в /bitrix/css.

    Файл lightbox.js закачиваем в /bitrix/js
    Файлы из Images закачиваем в /bitrix/images. Файлы, не папку!

  2. Идем в редактирование шаблона сайта



    До закрытия тега </head> вставляем эти строчки:
    CUtil::InitJSCore(array("jquery"));
    $APPLICATION->AddHeadScript('/bitrix/js/lightbox.js');
    $APPLICATION->SetAdditionalCSS("/bitrix/css/lightbox.css");
    Сохраняем шаблон.
    Все.
  3. Рисунок отображаем на любой странице вот так:
    <!-- тег <p> здесь нужен для того чтобы рисунок был по центру -->
    <p style="text-align:center;">
    <a href="/путь до рисунка" data-lightbox="data1" data-title="титл рисунка"><img src="/путь до рисунка или до его уменьшенной копии"></a>
    </p>
    И получаем вот такой результат:

Если нужно отобразить несколько рисунков, а при увеличении одного из них иметь возможность перелистывать их, то в нужной группе рисунков ставим одинаковое свойство "data-lightbox". Выделил жирным.

<!-- тег <p> здесь нужен для того чтобы рисунок был по центру -->
<p style="text-align:center;">
<a href="/путь до рисунка" data-lightbox="data1" data-title="титл рисунка"><img src="/путь до рисунка или до его уменьшенной копии"></a>

<a href="/путь до рисунка2" data-lightbox="data1" data-title="титл рисунка2"><img src="/путь до рисунка или до его уменьшенной копии2"></a>
</p>

Добавить комментарий


Защитный код
Обновить