Как показать изображения в модальном окне

Как это работает

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

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

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

  1. Откройте проект в Личном кабинете.
  2. В боковом меню нажмите Site Builder.
  3. Нажмите Открыть Site Builder.
  4. Добавьте изображение в нужный блок. Возможные варианты:
    • Описание
    • Галерея
  5. Вставьте в блок Ваш код следующий код:
Copy
Full screen
Small screen
<script>
(function () {
  var blocks = ['.block--description', '.block--gallery'];

  var style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
  document.getElementsByTagName('head')[0].appendChild(style);

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
  script.addEventListener('load', function () {
    var fancyBoxClass = 'image-fancybox';
    blocks.forEach(function (block) {
      $(block)
        .find('[data-bg]')
        .toArray()
        .forEach(function (element) {
          var url = element.getAttribute('data-bg')
            .replace('url(', '')
            .replace(')', '')
            .replace('"', '')
            .trim();
          if (url === '') {
            return;
          }
          $(element)
            .parent()
            .wrap('<a style="width: 100%; height: 100%;" class="' + fancyBoxClass + '" href="' + url + '"></a>');
        });
    });

    $('.' + fancyBoxClass)
      .fancybox();
  }, false);
  document.getElementsByTagName('body')[0].appendChild(script);
})();
</script>

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

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


Добавление собственного кода

  1. В окне конструктора нажмите Добавить блок и выберите блок Ваш код.
  1. Вставьте в блок собственный код.
Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.

Полезные ссылки

Последнее обновление: 26 марта 2024

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

Сообщите о проблеме
Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
Укажите email-адрес, чтобы мы могли связаться с вами
Спасибо за обратную связь!