Bitrix ShortCode baguetteBox.js or owl with swipebox Gallery

README.md

Bitrix ShortCode baguetteBox.js or OwlCarousel2 with swipebox Gallery

Простая галерея для Bitrix по shortCode из Инфоблока

Файлы

• gallery.php должен находиться в дирректории /bitrix/templates/SITE_TEMPLATE_ID/component_handlers/
• result_modifier.php должен быть в каждом шаблоне news.detail, где будут выводиться галереи

Использование

[gallery 000] где 000 - ID галлереи

Результат вывода

Создать инфоблок в панели

Добавление фотографий

Sequence Диаграмка

QQQ->EEE: Says Hello 
Note right of EEE: EEE thinks\nabout it 
EEE-->QQQ: How are you? 
QQQ->>EEE: I am good thanks!

gallery.php

<?
// File: /bitrix/templates/SITE_TEMPLATE_ID/component_handlers/gallery.php

$IBLOCK_ID_PHOTOS = 18;	// ID инфоблока с галереей
$COUNT_ROW = 3;		// Сколько картинок в строку
$CONTENT = $arResult['DETAIL_TEXT'];

preg_match_all('/\[gallery ([0-9]+)\]/', substr($CONTENT, 0), $matches, PREG_SET_ORDER);

if($matches) {
	$APPLICATION->SetAdditionalCSS("https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css");
	$APPLICATION->AddHeadScript   ("https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js");
}

foreach($matches as $idx=> $val) {

	$gals = CIBlockElement::GetProperty($IBLOCK_ID_PHOTOS, $val[1], ["sort" => "asc"], ["CODE" => "photos"]);
	$offset = $gals->result->num_rows%$COUNT_ROW;
	
	$fullGallery = '<div class="tz-gallery" id="tz-gall-' . $idx . '"><div class="row">';
	$items = 0;

	while ($ob = $gals->GetNext()) {

		if($offset == 2 && $items < 2){ 
			$itemClass = 'col-sm-6';
			$size = ["width" => 540, "height" => 360];
		}
		elseif($gals->result->num_rows > 7){
			$itemClass = 'col-sm-6 col-md-3';
			$size = ["width" => 360, "height" => 240];
		}
		elseif($offset == 1 && $items < 1){
			$itemClass = 'col-sm-6 col-md-4';
			$size = ["width" => 360, "height" => 240];
		}
		else{
			$itemClass = 'col-sm-6 col-md-4';
			$size = ["width" => 360, "height" => 240];
		}

		$pic = CFile::ResizeImageGet($ob['VALUE'], $size, BX_RESIZE_IMAGE_EXACT);
		$fullGallery .= '<div class="'.$itemClass.'">
							<a class="lightbox" href="'.CFile::GetPath($ob['VALUE']).'"> 
								<img alt="'.$arResult['NAME'].'" src="'.$pic['src'].'" title="'.$arResult['NAME'].'">
							</a>
						</div>';
		$items++;
	}
	$fullGallery .= '</div></div>';

	$fullGallery .= '<script> baguetteBox.run("#tz-gall-' . $idx . '"); </script>';

	$CONTENT = str_replace($val[0], $fullGallery, $CONTENT);
}

$CONTENT = preg_replace('/<\?=SITE_TEMPLATE_PATH\?>/', SITE_TEMPLATE_PATH, $CONTENT);
$arResult['DETAIL_TEXT'] = $CONTENT;

?>

gallery_owl_with_swipebox.php

<?
// File: /bitrix/templates/SITE_TEMPLATE_ID/component_handlers/gallery.php

// !! Выше jQuery 2.1.0 не работало !!

///
$APPLICATION->SetAdditionalCSS('https://raw.githubusercontent.com/brutaldesign/swipebox/master/src/css/swipebox.min.css');
$APPLICATION->SetAdditionalCSS('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css');
$APPLICATION->AddHeadScript('https://code.jquery.com/jquery-2.1.0.min.js');
$APPLICATION->AddHeadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.4.4/js/jquery.swipebox.js');
// $APPLICATION->AddHeadScript('https://raw.githubusercontent.com/brutaldesign/swipebox/master/src/js/jquery.swipebox.min.js');
$APPLICATION->AddHeadScript('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js');
// $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/assets/js/ios-orientationchange-fix.js');
///

$IBLOCK_ID_PHOTOS = 11;	// ID инфоблока с галереей
$CONTENT = $arResult['DETAIL_TEXT'];

preg_match_all('/\[gallery ([0-9]+)\]/', substr($CONTENT, 0), $matches, PREG_SET_ORDER);

foreach($matches as $idx => $val) {

	$gals = CIBlockElement::GetProperty($IBLOCK_ID_PHOTOS, $val[1], ["sort" => "asc"], ["CODE" => "photos"]);
	
	$fullGallery = '<div class="owl-carousel owl-theme">';
	
	while ($ob = $gals->GetNext()) {

		$size = ["width" => 360, "height" => 240];

		$picA = CFile::GetPath($ob['VALUE']);
		$picB = CFile::ResizeImageGet($ob['VALUE'], $size, BX_RESIZE_IMAGE_EXACT)['src'];

		$fullGallery .= '<a class="item swipebox" rel="gallery-' . $idx . '" href="' . $picA . '">
							<img alt="' . $arResult['NAME'] . '" src="' . $picB . '" title="' . $arResult['NAME'] . '"></a>';
	}
	$fullGallery .= '</div>';

	$CONTENT = str_replace($val[0], $fullGallery, $CONTENT);
}

$CONTENT = preg_replace('/<\?=SITE_TEMPLATE_PATH\?>/', SITE_TEMPLATE_PATH, $CONTENT);
$arResult['DETAIL_TEXT'] = $CONTENT;
?>

result_modifier.php

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
// File: /bitrix/templates/SITE_TEMPLATE_ID/components/bitrix/news/.default/bitrix/news.detail/.default

// Обработка шорткода [gallery ***]
@include_once($_SERVER['DOCUMENT_ROOT'] . '/bitrix/templates/' . SITE_TEMPLATE_ID  . '/component_handlers/gallery.php');
@include_once($_SERVER['DOCUMENT_ROOT'] . '/local/templates/' . SITE_TEMPLATE_ID  . '/component_handlers/gallery.php');
// ** 

?>