Если вы хотите сделать просмотр изображений на сайте более удобным для пользователя, вы можете настроить открытие изображений в модальном окне с помощью пользовательского HTML-кода. Вы можете использовать готовое решение или добавить свой код.

Как настроить

Использование готового решения

Откройте проект в Личном кабинете.
В боковом меню нажмите Site Builder.
Нажмите Открыть Site Builder.
Добавьте изображение в нужный блок. Возможные варианты:
- Описание
- Галерея
Вставьте в блок Ваш код следующий код:

Copy

Full screen

Small screen

 1<script>
 2(function () {
 3  var blocks = ['.block--description', '.block--gallery'];
 4
 5  var style = document.createElement('link');
 6  style.rel = 'stylesheet';
 7  style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
 8  document.getElementsByTagName('head')[0].appendChild(style);
 9
10  var script = document.createElement('script');
11  script.type = 'text/javascript';
12  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
13  script.addEventListener('load', function () {
14    var fancyBoxClass = 'image-fancybox';
15    blocks.forEach(function (block) {
16      $(block)
17        .find('[data-bg]')
18        .toArray()
19        .forEach(function (element) {
20          var url = element.getAttribute('data-bg')
21            .replace('url(', '')
22            .replace(')', '')
23            .replace('"', '')
24            .trim();
25          if (url === '') {
26            return;
27          }
28          $(element)
29            .parent()
30            .wrap('<a style="width: 100%; height: 100%;" class="' + fancyBoxClass + '" href="' + url + '"></a>');
31        });
32    });
33
34    $('.' + fancyBoxClass)
35      .fancybox();
36  }, false);
37  document.getElementsByTagName('body')[0].appendChild(script);
38})();
39</script>

В параметре blocks укажите через запятую названия CSS-классов блоков, в которых вы хотите настроить модальное окно для открытия изображения. Если на вашем сайте несколько одинаковых блоков, настройка будет применяться ко всем. Возможные варианты:
- .block--description (блок Описание)
- .block--gallery (блок Галерея)
Нажмите кнопку Просмотр, чтобы увидеть изменения.

Ознакомьтесь с видеоинструкцией к разделу: