Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Фотогалерея на базе компонента новостей, с fancybox.

Просмотров: 514

Это заметка обновление к очень старой, уже имеющейся на сайте. Сделаем что-то типа фотогалереи на базе встроеннного в битрикс шаблона новостей.

Итак: для начала создаем инфоблок для будущей галереи. Называем как угодно, самое главное у него должно быть свойство для хранения фотографий. Так и назовем "Картинки" с кодом "MORE_PHOTO"

Дополнительные картинки в новостях Битрикс

Выводим компонент новостей на страницу, копируем шаблон и переходим к редактированию шаблона детальной новости /ВАШ_ШАБЛОН/bitrix/news.detail/.default/

Здесь создаем файл result_modifier.php с кодом


$arResult["MORE_PHOTO"] = array(); 
if(isset($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"]) && is_array($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"])) 
{ 
 	foreach($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $FILE) 
 	{ 
		 $FILE = CFile::GetFileArray($FILE); 
		 if(is_array($FILE)) 
		 $arResult["MORE_PHOTO"][]=$FILE; 
 	} 
}

Тем самым мы дополнили массив $arResult дополнительными фотографиями из свойства.

Далее выводим картинки, пока просто подряд, в файле template.php - это основной файл шаблона новости.


if(count($arResult["MORE_PHOTO"])>0){ 
	foreach($arResult["MORE_PHOTO"] as $PHOTO){ 
	?>
		<img src="<?=$PHOTO["SRC"]?>"/>
	<?}
}

Создаем картинки превью и детальную с CFile::ResizeImageGet

CFile::ResizeImageGet - Метод уменьшает картинку и размещает уменьшенную копию в папку /upload/resize_cache/путь.

Так как картинки будут увеличиваться при клике, есть смысл создать маленькие превью из большых (загруженных) картинок. Сделать это можно методом CFile::ResizeImageGet

Можно было бы добавить метод там же, в result_modifier.php что бы дополнить массив всеми вариантами картинки. Но что бы не усложнять объяснение сделаю это прямо тут:


if(count($arResult["MORE_PHOTO"])>0){ 
	foreach($arResult["MORE_PHOTO"] as $PHOTO){
	$smallPict = CFile::ResizeImageGet($PHOTO, array('width'=>150, 'height'=>'150'), BX_RESIZE_IMAGE_EXACT, true);
	?>
	<a href="<?=$PHOTO["SRC"]?>">
		<img src="<?=$smallPict["src"]?>"/>
	</a>
	<?}
}

Таким образом, мы вывели маленькие картинки и завернули их в ссылку с оригиналом. Если кликнуть на превью откроется большая картинка.

Добавляем fancybox

Теперь самое главное, делаем красиво с помощью fancybox3. Качаем скрипт с этой библиотекой, создаем файл script.js в шаблоне новости и вставляем весь код библиотеки в него. А файлы стилей fancybox добавляем в style.css

Скачать файлы fancybox

И добавляем fancybox обвертку для наших превью


if(count($arResult["MORE_PHOTO"])>0){ 
	foreach($arResult["MORE_PHOTO"] as $PHOTO){
	$smallPict = CFile::ResizeImageGet($PHOTO, array('width'=>150, 'height'=>'150'), BX_RESIZE_IMAGE_EXACT, true);
	?>
	<a href="<?=$PHOTO["SRC"]?>" data-fancybox="images" data-caption="<?=$arResult['NAME']?>">
		<img src="<?=$smallPict["src"]?>"/>
	</a>
	<?}
}

В принципе, на этом все, галерея заработает как надо. Но, можно воспользоваться методами fancybox что бы сделать красивее и удобнее.

В самый низ script.js добавляем:


$().fancybox({
    selector: '[data-fancybox="images"]',
    thumbs: {
    	// Показывать превью
        autoStart: true,
    },
    keyboard: true,
    buttons: [
        // Показывать кнопку закрытия модалки
        "close"
    ],
    // Эффект анимации при перелючении
    transitionEffect: "zoom-in-out",
    // Зацикливать превью
    loop: true,
});

Все методы (их очень много) можно посмотреть в документации к fancybox. Образец работы, с теми методами что перечислил выше, можно в разделе обо мне в секции сертификатов

Битрикс сертификат
Михаил Базаров14.05.2022
Основные методы для fancybox (что бы не искать)
Скрытый текст

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Простой WEB сервер на ubuntu, для Битрикс Просмотров: 33365 Расскажу как по быстрому сконфигурировать WEB сервер для работы с Битрикс. Безо всяких ngi... Memcached на сайте под управлением битрикс, при использовании Веб Окр... Просмотров: 6153 Если вам важна скорость отдачи сайта, а у вашего сервера медленный диск для использования ... Регистрация пользователя в определенную группу сайта на Битрикс Просмотров: 20837 Достаточно часто требуется регистрировать пользователя в определенную группу, в зависимост... Cмена вида карточки товара в catalog.section без прокрутки страницы в... Просмотров: 2966 Сделать переключатель шаблонов catalog.section, в каталоге на 1С-Битрикс, без прокрутки ст... Объединить отдельные поля ФИО в одно свойство при оформлении заказа. Просмотров: 279 Пользователь, при оформлении заказа, заполняет три отдельных поля с фамилией, именем и отч... Дать пользователю возможность быстро отредактировать материал Просмотров: 3905 На одном из разрабатываемых сайтов, пользователи формирую его контент. После регистрации, ... Дополнительные параметры в меню Битрикс Просмотров: 18329 Иногда нужно присвоить какой-то функционал к конкретному пункту меню в битрикс. Например о... Ленивая подгрузка картинок в компоненте, на vue js Битрикс Просмотров: 8549 Если на одну страницу сайта выводится большое количество картинок, которые могут долго под... Создание раздела инфоблока при регистрации пользователя в Битрикс Просмотров: 7223 Например вам нужно выводить информацию исключительно для определенного пользователя. Само ... Вывести дополнительное пользовательское поле, использование полей в ф... Просмотров: 14384 Если вам нужно вывести дополнительное пользовательское поле типа "Привязка к разделам инфо...