Как увеличить картинку на странице

Иногда есть потребность сделать у картинки возможность увеличивать ее при клике. 

Для этого используйте класс 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.

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK