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

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

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

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

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

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

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

Показать только один тип цены в каталоге Битрикс Просмотров: 13715 Достаточно часто, при создании сайта на битрикс, можно столкнуться с такой проблемой: на с... Адаптивное гамбургер меню для битрикс Просмотров: 14424 Заметка коротенькая, но решил оставить ее - так как самому часто нужно нечто подобное. В а... Фиксированная корзина с обновлением, без перезагрузки страницы. Просмотров: 17481 Иногда нужно сделать так, чтобы корзина в интернет магазине, созданном на Битрикс, была по... Заполнить картинки разделов каталога из картинок товаров Просмотров: 324 Задача: в каталоге, разделы и подразделы выводятся в виде плитки над товарами, с картинкам... Не дать пользователю купить больше одного товара, в Битрикс Просмотров: 5126 Иногда нужно и такое: Например: на одном из разрабатываемых сайтов, мне нужно было создать... Самодельная форма добавления элемента на API Битрикс Просмотров: 42447 Компонент iblock.element.add.form написан таким образом, что вы не сможете (не попотев изр... Индивидуальные цены в 1С-Битрикс: в каталоге и при оформлении заказа Просмотров: 4908 В этой заметке постараюсь описать процесс реализации индивидуальных цен, для пользователей... Если пользователь авторизован то... API Битрикс Просмотров: 22204 Достаточно часто, при создании сайта на битрикс нужно вывести в шаблон или компонент, неку... Пункты меню из разделов инфоблока Битрикс Просмотров: 90591 В принципе это стандартная возможность системы управления битрикс, но почему-то часто спра... Сортировать товары по названию, цене и дате поступления в каталоге Би... Просмотров: 39342 Достаточно часто заказчик просит вывести сортировку по цене, новым поступлениям и названию... Установить цену товара из свойства инфоблока Просмотров: 8674 На одном из проектов, нужно было единоразово заполнить цены товаров из свойства инфоблока... Показ страницы сайта в боковом слайдере, на примере всплывающей формы... Просмотров: 1830 Если вы хотите сделать подгрузку любой страницы сайта в боковой слайдер, для этого в битри... Объединить отдельные поля ФИО в одно свойство при оформлении заказа. Просмотров: 855 Пользователь, при оформлении заказа, заполняет три отдельных поля с фамилией, именем и отч... Отключить поиск по описаниям товаров в Битрикс Просмотров: 10581 Иногда, нужно отключить поиск по описаниям анонсов и детальному описанию товаров, при разр... Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 744 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д... Получить все товары из всех заказов пользователя. История купленных т... Просмотров: 1344 Задача: нужно создать раздел, в персональном разделе пользователя, с историей всех купленн... Вывести артикул в печатную форму бланка заказа Просмотров: 350 Задача: в печатную форму бланка заказа добавить артикулы товаров и данные о пользователе. ... Установить остатки товара на складе из доступных остатков. Просмотров: 4844 Задача, заполнить остатки товаров, в 1С-Битрикс, из параметра "Доступное количество". Картинка торгового предложения вместо иконки цвета, в выборе SKU Просмотров: 252 Задача: вместо не информативных иконок цветов нужно вывести детальную картинку торгового п... Использование WebP изображений в 1С-Битрикс (на Битрикс: Веб окружени... Просмотров: 25829 WebP это современный формат сжатия изображений, который позволяет, при правильных настройк...