Как показать изображения в модальном окне
Как это работает
Если вы хотите сделать просмотр изображений на сайте более удобным для пользователя, вы можете настроить открытие изображений в модальном окне с помощью пользовательского HTML-кода. Вы можете использовать готовое решение или добавить свой код.
Как настроить
Использование готового решения
- Откройте проект в Личном кабинете.
- В боковом меню нажмите Site Builder.
- Нажмите Открыть Site Builder.
- Добавьте изображение в нужный блок. Возможные варианты:
- Описание
- Галерея
- Вставьте в блок Ваш код следующий код:
Copy
- html
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 (блок Галерея)
- Нажмите кнопку Просмотр, чтобы увидеть изменения.
Ознакомьтесь с видеоинструкцией к разделу:
Добавление собственного кода
- В окне конструктора нажмите Добавить блок и выберите блок Ваш код.
- Вставьте в блок собственный код.
Была ли статья полезна?
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.Полезные ссылки
Последнее обновление:
9 июля 2025
Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.