Как добавить картинку с увеличением

Простой пример для статической страницы или описания товара

В head.html добавить код

<script src="/wa-data/public/site/themes/wa2022/js/jquery.fancybox.pack.js"></script>
<script src="/wa-data/public/site/themes/wa2022/js/jquery.fancybox-thumbs.js"></script>
<link rel="stylesheet" href="/wa-data/public/site/themes/wa2022/css/jquery.fancybox.css?2.9.6"/>
<script>$(".fancybox").fancybox();</script>

В любое место на странице добавить (ссылки на картинки для примера)

<a href="https://topshop.wa-magazin.ru/wa-data/public/site/data/moscow.jpg" class="fancybox"><img src="https://topshop.wa-magazin.ru/wa-data/public/site/data/moscow.jpg"></a>

Как это работает можно посмотреть на этой странице https://topshop.wa-magazin.ru/o-magazine/moskva/

Обратите внимание
SEO-фильтр
SEO-фильтр

SEO-оптимизация страниц результатов подбора

SEO-оптимизация
SEO-оптимизация

Быстрая и гибкая оптимизация вашего магазина

Ajax фильтры
Ajax фильтры

Фильтры товаров как в Яндекс.Маркете с описанием

Купить в 1 клик
Купить в 1 клик

Адаптивная и гибкая форма для быстрой покупки!

Редактировать в один клик
Редактировать в один клик

Товары в админке,вместо просмотра - редактирование

Автозаполнение адреса
Автозаполнение адреса

Удобное заполнение адреса доставки в один клик