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

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

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

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

Итак: для начала создаем инфоблок для будущей галереи. Называем как угодно, самое главное у него должно быть свойство для хранения фотографий. Так и назовем "Картинки" с кодом "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 (что бы не искать)
Скрытый текст
Гость 01.09.2022
Можно ли сделать картинку в квадрат данным способом? Например, если картинка вертикальная, но не хватает полей слева и справа, то сделать их белыми.
Михаил Базаров 01.09.2022
Цитата
Гость написал:
Можно ли сделать картинку в квадрат данным способом? Например, если картинка вертикальная, но не хватает полей слева и справа, то сделать их белыми.

По моему fancybox так не умеет. Надо в их документации посмотреть
Николай 03.01.2023
Как вариант, еще можно использовать превью записи (показать в списке) и детальное изображение (открывать при клике). Но скорее всего в таком случае придется отказаться от webp (раньше битрикс не поддерживал), зато можно самостоятельно редактировать обе версии изображения, а для автоматизации использовать "Уменьшать изображение, если большое" и "Использовать детальную картинку"

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

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

Отсортировать элементы в Битрикс по свойству привязка к разделам Просмотров: 28992 При создании достаточно сложных интернет-магазинов на Битрикс, иногда встает задача помимо... Прятать или показывать описание раздела каталога Просмотров: 1046 В новых компонентах и шаблонах catalog.section есть не документированный и не выводимый па... Как вывести картинки к разделам на базе _ext меню Просмотров: 7641 Просто для эстетической красоты, нужно вывести в меню разделов сайта картинки или иконки. ... Снять ограничение на количество символов в комментарии к заказу магаз... Просмотров: 12604 Как многим известно, в интернет-магазине на Битрикс имеется ограничение на количество симв... XML в формате Commerce ML-2, города России и Мира, для выгрузки в инф... Просмотров: 6961 Подвернулась задачка, создать инфоблок для Битрикс, в котором будут просто города России и... Малая корзина Битрикс, упрощенный шаблон Просмотров: 13606 Шаблон малой корзины битрикс, который можно вывести в боковом разделе шаблона или в шапке ... Умный фильтр на главной странице Битрикс Просмотров: 22295 Редкая но востребованная задачка- это вывести компонент "умный фильтр" на главную страницу... Модифицировать состав заказа #ORDER_LIST# в почтовом событии "Новый з... Просмотров: 30308 Если вы хотите как-то по особенному сверстать состав заказа в почтовом уведомлении 1С-Битр... Вывести имя пользователя добавившего элемент инфоблока в Битрикс Просмотров: 17211 Иногда, необходимо вывести имя пользователя добавившего элемент инфоблока. Например, автор... Ленивая подгрузка картинок в компоненте, на vue js Битрикс Просмотров: 10347 Если на одну страницу сайта выводится большое количество картинок, которые могут долго под... Дать пользователю возможность быстро отредактировать материал Просмотров: 4944 На одном из разрабатываемых сайтов, пользователи формирую его контент. После регистрации, ... Картинка торгового предложения вместо иконки цвета, в выборе SKU Просмотров: 709 Задача: вместо не информативных иконок цветов нужно вывести детальную картинку торгового п... Подключение SSL на Битрикс виртуальная машина Просмотров: 13280 С первого января 2017 года, наличие безопасного соединения HTTPS становится практически об... Перенос Битрикс сайта с хостинга на хостинг, инструкция Просмотров: 27390 Достаточно часто спрашивают как перенести сайт работающий на 1С Битрикс с одного хостинга ... AJAX корзина с отправкой количества из раздела каталога Просмотров: 20152 Столкнулся с задачкой: нужно было на одном сайте реализовать интерактивный прайс лист. При... Регистрация пользователя в определенную группу сайта на Битрикс Просмотров: 23547 Достаточно часто требуется регистрировать пользователя в определенную группу, в зависимост... Добавить свойство в административную форму заказа Просмотров: 3759 Задача, кастомизировать административную форму заказа: добавить свойство заказа в шапку фо... Простой WEB сервер на ubuntu, для Битрикс Просмотров: 35931 Расскажу как по быстрому сконфигурировать WEB сервер для работы с Битрикс. Безо всяких ngi... Не дать пользователю купить больше одного товара, в Битрикс Просмотров: 5859 Иногда нужно и такое: Например: на одном из разрабатываемых сайтов, мне нужно было создать... INPUT type="file" Предпросмотр превью картинки до загрузки Просмотров: 12921 Рассмотрим на примере компонента "Форма добавления-редактирования элементов инфоблока", ка...