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

May 16, 2013 14:37


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

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

$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;
}
}  
?>
0):?>

'225', 'height'=>'150'), BX_RESIZE_IMAGE_EXACT, true); ?>

" width="" height="" rel="lightbox[plants]" title="">
" alt="" title="" width="225" height="150" border="0" class="morephoto_img" />

*/?>

Замечу, что закомментированный 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/

bitrix, Тестинг и программинг, Работа, Интересное в сети, Портфолио

Previous post Next post
Up