Страница с блоком фотографий в 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;}