Как увеличить картинку на странице
Иногда есть потребность сделать у картинки возможность увеличивать ее при клике.
Для этого используйте класс as-img и атрибут data-bigImage. Пример:
<img src="..." class="as-img" data-bigImage="...." title/>
При клике будет появляться диалоговое окно. Если указан title - то он будет использоваться в качестве заголовка модального окна.
Если там нужно сделать для любых картинок (например, эти картинки добавляются через rich редактор и проблематично проставить классы as-img), то задействуем JS:
$(document).delegate('.cont1 img', 'click', function(e){
var img = $(this);
if(img.closest("a").length) return;
e.preventDefault();
var s = "<img src='"+img.attr('src')+"' class='d-block mx-auto' />";
as.sys.showDialog("", s, "", function(){
}, true);
});
Важно: это будет действовать на все картинки в рамках некоего контейнера с классом cont1.
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация Панели с тенью и со скруглением Добавление анимации Как стилизовать иконку Ограничения по изменению дизайна Изменение стилизации через CSS HOWTO. Анимация элементов. Как работать с анимацией HOWTO. Как сделать анимацию иконок Управление темами сайта. Как создать новую тему дизайна сайта Как сделать липкую панель сверху страницы CSS. Как внедрить свои стили CSS на каждой странице портала CSS. Кастомные CSS файлы Руководство по юзабилити сайтов на базе Falcon Space. Как улучшить свой сайт Как улучшить внешний вид личного кабинета на сайте - элементы стилизации в разметке страниц Falcon Space Создание редактируемого лендинга через механизм Ленды Как внедрить форму настроек внешнего вида сайта Страницы. Как внедрить лендинг со своим шаблоном и стилями Как внедрять готовую верстку в страницу Верстка. Как внедрить новый шрифт в проект CSS. Как через CSS управлять стилями конкретных страниц Гид по стилям Falcon Space Кастом разметка верхней панели (TopMakeup) Как поменять степень затемнения фона у диалогового окна Верстка. Как поменять столбцы местами на смартфоне Управление анимацией для форм, таблиц Как сделать основное меню горизонтальным Как сделать основное меню белым Управление иконкой в окне alert справа вверху окна Как сделать полную кастомизацию верхней полоски сайта (customHeader) Как сделать дизайн сайта со скругленными элементами (или без скруглений) Вывод на экран денежных сумм (отображение рублей, валюты) - as-money Как увеличить картинку на странице Визуализация воронки на основе данных Создание своей темы для сайта
- API, Интеграции
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- HOWTO
- HOWTO Таблицы
- HOWTO Формы
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы