1С-Битрикс: Вывод дополнительных картинок в новостях с галереей Lightbox 2 через свойство Файл

Задача: подгружать к элементу инфоблока в свойство файл множество картинок, затем выводить их в детальной новости и оформить это красиво с выпадающими эффектами и листанием фоток.

Решение:
1) Скачиваем библиотеку Lightbox 2, работает как надо, грузим себе всё на сайт.
2) Заберём себе полностью кусок кода для вывода по свойству «morephoto»:

<?/////////////////////////////////// PHOTO START ////////////////////////////////////////////////?>
<?if($arProperty[«CODE»]==»morephoto»):?>
<span class=»color_header»><?=$arProperty[«NAME»]?></span>
<div style=»clear:both»></div>
<?
$arResult[«morephoto»] = array();  
if(isset($arResult[«PROPERTIES»][«morephoto»][«VALUE»]) && is_array($arResult[«PROPERTIES»][«morephoto»][«VALUE»]))  
{  
foreach($arResult[«PROPERTIES»][«morephoto»][«VALUE»] as $FILE)  
{  
$FILE = CFile::GetFileArray($FILE);  
if(is_array($FILE))  
$arResult[«morephoto»][]=$FILE;
}
}  
?>
<?if(count($arResult[«morephoto»])>0):?>
<div class=»imageRow»>
<?foreach($arResult[«morephoto»] as $PHOTO):?>
<div class=»set»>
<?$file = CFile::ResizeImageGet($PHOTO, array(‘width’=>’225’, ‘height’=>’150’), BX_RESIZE_IMAGE_EXACT, true); ?>
<div class=»morephoto»>
<div class=»single»>
<a href=»<?=$PHOTO[«SRC»]?>» width=»<?=$PHOTO[«WIDTH»]?>» height=»<?=$PHOTO[«HEIGHT»]?>» rel=»lightbox[plants]» title=»<?=$PHOTO[«DESCRIPTION»]?>»><img src=»<?=$file[«src»]?>» alt=»<?=$PHOTO[«DESCRIPTION»]?>» title=»<?=$PHOTO[«DESCRIPTION»]?>» width=»225″ height=»150″ border=»0″ class=»morephoto_img» /></a>
<? /*<div style=»width:220px; padding:5px;»><?=$PHOTO[«DESCRIPTION»]?></div> */?>
</div>
</div>
</div>
<?endforeach?>
</div>
<?endif?>  
<div style=»clear:both»></div>
<?endif?>

<?//////////////////////////////////// PHOTO STOP ///////////////////////////////////////////////?>

Замечу, что закомментированный div с описанием фотки у меня в коде — это хранитель небольшого косячка. Так, если большую подпись к фото впишешь, то малость плывёт всё построение фоток в линейку. В моём случае было проще принять решение выводить подпись к уменьшенной копии через атрибуты alt=»» и title=»», а показывать полнотекст описания к фотке уже на странице с просмотром оригинала.

Ещё, т.к. у меня двуязычные сайты, то я на русских подгружаю один скрипт лайтбокса, а на англоязычных — другой. Это файл lightbox.js, мною смодифицированный внутри;
находим строки 55 и 56 :

this.labelImage = «Image»;
this.labelOf = «of»;
и переводим их на все нужные языки (если принципиально важно).
А в строках 51 и 52 полные пути к картинкам предзагрузки и закрытия окна лайтбокса. Это уж совсем для ленивых, чтоб долго не рыться.Делюсь, пользуйтесь и экономьте время!

зы: большое спасибо примеру блоггера http://tvovochka.ru и одноимённой статье «1С-Битрикс: Вывод дополнительных картинок в новостях» ажно за 2011 год. Здесь же и функция ресайза CFile::ResizeImageGet, расписано подробно и понятно, код изначальный отсюда. Про ресайзы изображений написано на Bitrix-help.ru в статье «Динамическое масштабирование изображения средствами CMS 1c Bitrix«

А можно протестировать работу стороннего компонента из Маркетлейса http://marketplace.1c-bitrix.ru/solutions/Sementsov.imagebox/


Понравилась моя запись?
Кликни по рекламному баннеру ниже. Тебе бесплатно и не сложно, а мне - честный заработок блогом и приятное дополнение к энтузиазму на чашку кофе :-)