Подключаем fancybox

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

 

Слайт

<div id="mainCarousel" class="carousel mb-4 w-10/12 max-w-xl mx-auto">

<?php if (!empty($arResult['PROPERTIES']['GALLERY_FOTO_SLIDE']['VALUE'])): ?> </a>

<?php foreach ($arResult['PROPERTIES']['GALLERY_FOTO_SLIDE']['VALUE'] as $item): ?>
<?php
// путь к изображению от корня сайта
$image = CFile::GetPath($item);
// создаем превьюшку изображения
$thumb = CFile::ResizeImageGet(
$item,
array('width' => 700, 'height' => 700)
);
?>
<a class="carousel__slide" data-lazy-src href="/<?= $image; ?>"><img src="/<?= $thumb['src']; ?>" alt="" /></a>
<?php endforeach; ?>

<?php endif; ?>

</div>
</div>

 

Галерея

<div class="flex flex-wrap gap-5 justify-center max-w-5xl mx-auto px-6">

<?php if (!empty($arResult['PROPERTIES']['GALLERY_FOTO']['VALUE'])): ?> </a>

<?php foreach ($arResult['PROPERTIES']['GALLERY_FOTO']['VALUE'] as $item): ?>
<?php
// путь к изображению от корня сайта
$image = CFile::GetPath($item);
// создаем превьюшку изображения
$thumb = CFile::ResizeImageGet(
$item,
array('width' => 265, 'height' => 300)
);
?>
<a data-fancybox="gallery" href="/<?= $image; ?>"><img src="/<?= $thumb['src']; ?>" alt="" /></a>
<?php endforeach; ?>

<?php endif; ?>

</div>

 

 Вызов

 

<script>

Fancybox.bind('[data-fancybox="gallery"]', {
caption: function (fancybox, carousel, slide) {
return (
`${slide.index + 1} / ${carousel.slides.length} <br />` + slide.caption
);
},
});

const mainCarousel = new Carousel(document.querySelector("#mainCarousel"), {

});

</script>

 

Стили

a[data-fancybox] img {
cursor: zoom-in;
}

.fancybox__caption {
text-align: center;}

 

#mainCarousel {
color: #170724;

--carousel-button-bg: #fff;
--carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);

--carousel-button-svg-width: 20px;
--carousel-button-svg-height: 20px;

--carousel-button-svg-stroke-width: 2.5;
}

#mainCarousel .carousel__slide {
width: 51%;
padding: 0;
}