header

content

Страница с блоком фотографий в fancybox. В шаблон компонента news.detail
Страница с блоком фотографий в fancybox. В шаблон компонента news.detail
Подключить jquery в шаблоне сайта.
Загрузить fancybox из архива на сервер.
В шаблоне компонента news.detail подправить пути до расположения библиотеки fancybox
<?
// локальные настройки
$field_photos_code = 'PHOTOS'; // код пользовательского поля для фотографий (тип "файл" множественное)
$tmb_width = 250;  // ширина превью
$tmb_height = 250; // высота превью
$img_width = 800;  // ширина фото
$img_height = 600; // высота фото
?>

<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox.min.css">
<script src="/fancybox/jquery.fancybox.min.js"></script>
<script src="/fancybox/custom.js"></script>

<? if(isset($arResult["PROPERTIES"][$field_photos_code]["VALUE"]) && $arResult["PROPERTIES"][$field_photos_code]["VALUE"]) { // вывод данных из свойства PHOTOS ?>
    <?
    $arPhotos = array();
    foreach($arResult["PROPERTIES"][$field_photos_code]["VALUE"] as $key=>$value) {
        $arPhotos[$key]['ID'] = $value;
    }

    // если используются описания для изображений - добавляем их в общий массив по ключу
    if(isset($arResult["PROPERTIES"][$field_photos_code]["DESCRIPTION"]) && $arResult["PROPERTIES"][$field_photos_code]["DESCRIPTION"]) {
        foreach($arResult["PROPERTIES"][$field_photos_code]["DESCRIPTION"] as $key=>$value) {
            $arPhotos[$key]['DESCRIPTION'] = $value;
        }
    }
    ?>

    <?
    /* Задаем размеры для миниатюры */
    $arrTmbSizes = array();
    $arrTmbSizes['width'] = $tmb_width;
    $arrTmbSizes['height'] = $tmb_height;

    /* Задаем размеры для фото */
    $arrPictureSizes = array();
    $arrPictureSizes['width'] = $img_width;
    $arrPictureSizes['height'] = $img_height;
    ?>

    <div class="news_item_photos_wrapper">
        <? foreach($arPhotos as $photos_item) { ?>
            <?
            $tmb = CFile::ResizeImageGet($photos_item['ID'], $arrTmbSizes, BX_RESIZE_IMAGE_EXACT );
            $img = CFile::ResizeImageGet($photos_item['ID'], $arrPictureSizes, BX_RESIZE_IMAGE_PROPORTIONAL_ALT );

            if(isset($photos_item['DESCRIPTION']) && $photos_item['DESCRIPTION']) {
                $img_desrciption = $photos_item['DESCRIPTION'];
            } else {
                $img_desrciption = $arResult["NAME"];
            }
            ?>
            <a href="<? echo $img['src']; ?>" data-fancybox="group" data-caption="<? echo $img_desrciption;?>">
                <img src="<? echo $tmb['src']; ?>" alt="<? echo $img_desrciption; ?>" title="<? echo $img_desrciption; ?>">
            </a>
        <? } ?>
    </div>
<? } ?>
.news_item_photos_wrapper{display:flex;flex-wrap:wrap;justify-content:center;}
.news_item_photos_wrapper a{display:block;margin:2px;}