Простая галерея для Bitrix по shortCode из Инфоблока
gallery.php должен находиться в дирректории /bitrix/templates/SITE_TEMPLATE_ID/component_handlers/result_modifier.php должен быть в каждом шаблоне news.detail, где будут выводиться галереи[gallery 000]
где 000 - ID галлереи
Результат вывода
Создать инфоблок в панели
Добавление фотографий
QQQ->EEE: Says Hello
Note right of EEE: EEE thinks\nabout it
EEE-->QQQ: How are you?
QQQ->>EEE: I am good thanks!
| <? | |
| // 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; | |
| ?> |
| <? | |
| // 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; | |
| ?> |
| <?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'); | |
| // ** | |
| ?> |