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

Для этого воспользуемся 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>