How to enable fancybox in the product card in Bitrix?

Question

PHP

I welcome everyone! I got a site on Bitrix, little by little I understand the layout and Bitrix itself, a question arose about fancybox and its use, namely, scrolling images in the product card. In order:
1. In the header I include jQuery, jquery-fancybox, bootstrap and their css:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/js/bootstrap.js")?>"></script>
  <script src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/js/script.js")?>"></script>
    <script src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/js/jquery.fancybox.js")?>"></script>
    <script src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/js/jquery.fancybox-buttons.js")?>"></script>
  <link href="/css/horizontalmenu.css" rel="stylesheet" type="text/css">
  <link href="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/css/bootstrap.css")?>" rel="stylesheet" media="screen">
  <link href="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/css/theme.css")?>" rel="stylesheet" media="screen">
    <link href="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/css/jquery.fancybox.css")?>" rel="stylesheet" media="screen">
    <link href="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/css/jquery.fancybox-buttons.css")?>" rel="stylesheet" media="screen">

2. Further, as I see it, in the element template itself, which displays the product card, there is such a piece of code that displays images associated with the product:

<div id="<?=$arItemIDs['ID']?>" class="product-card clearfix">
    <div class="group image col-xs-6">
        <ul class="list-unstyled">
            <li>
                <img id="destination_img" style="max-width:270px;" src="<? echo $arFirstPhoto['SRC']; ?>">
            </li>
            <?
            foreach($photos AS $photo){
                $photo = CFile::GetFileArray($photo);
                ?>
                <li>
                    <img class="img_clickable" style="max-width:130px;" src="<? echo $photo['SRC']; ?>">
                </li>
                <?
            }
            ?>
        </ul>
    </div>

3. At the end of the template page, I have a fancybox script connected:

<script type="text/javascript">
  $(document).ready(function() {
    $(".destination_img").fancybox();
  });
</script>

4. The problem is that I don't have the image scrolling buttons that should appear at the edges of the image in the modal window.
What am I doing wrong? Page with an example: firing-line.ru/catalog/gladkostvolnoe_oruzhie/faba...
The problem, as far as I understand, is that the rel parameter is not passed to the script, according to which the images are grouped into one gallery. How to insert it correctly?
Thanks in advance to all who respond.

Answer 1

display a link to large photos in a href and set rel to them, and pass what is now displayed in img through https://dev.1c-bitrix.ru/api_help/main/reference/c... and output as a thumbnail