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

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

В 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?3.2.0"/>
<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/