Это одна и самых простых задач в битриксе и имеет кучу вариаций решения.
Собственно суть заключается в том что бы в шаблоне формируете такую структуру как
| Код |
|---|
<a href="#ПОДРОБНАЯ_КАРТИНКА#" class="lightBox" title="#ПОДПИСЬ_К_КАРТИНКЕ#">
<img src="#КРАТКАЯ_КАРТИНКА#"/>
</a>
|
Варианты организации:
Вар. 1. Формируете например на базе элементов инфоблоков, где элементы являются единицей галереи - фотография, а разделы - альбомы. В настройках инфоблока настраиваете автоматическую генерацию кратких картинок. Ну и правите шаблон под нужный вид.
Вар. 2. Элемент инфоблока является альбомом, тогда нужно создать доп свойство множественного типа файл. При этом в шаблоне нужно генерировать маленькую картинку и кешировать
В зависимости от используемого компонента массив для перебора бывает разный, но таки дам пример "result_modifier.php" файла для шаблона раздела:
| Код |
|---|
foreach ($arResult['ITEMS'] as $itemkey => $arElement)
{
foreach ($arElement['DISPLAY_PROPERTIES']['PHOTOS'] as $imagekey => $arFile)
{
$arFileTmp = CFile::ResizeImageGet(
$arFile,
array("width" => 70, "height" => 70),
BX_RESIZE_IMAGE_PROPORTIONAL,
true
);
$arFile['PREVIEW_WIDTH'] = $arFileTmp["width"];
$arFile['PREVIEW_HEIGHT'] = $arFileTmp["height"];
$arFile['SRC_PREVIEW'] = $arFileTmp['src'];
$arResult[$itemkey]['DISPLAY_PROPERTIES']['PHOTOS'][$imagekey] = $arFile;
}
}
?> |
где PHOTOS есть код вашего свойства
(Код только для примера механизма ресайза в шаблоне с кешированием и тупым копипастом врятли заработает(да включаем мозги
))
Вар 3. Организация галереи любым способом из варианта 1 и 2 но не нужна краткая картинка.
| Код |
|---|
<a href="#ПОДРОБНАЯ_КАРТИНКА#" class="lightBox" title="#ПОДПИСЬ_К_КАРТИНКЕ#">
<img src="#ПОДРОБНАЯ_КАРТИНКА#" width="70"/>
</a>
|
Просто задаем размеры маленькой картинки в верстке или в стилях, а браузер уже отобразить маленькую картинку. В данном варианте минус в том что для того что бы увидеть маленькую картинку нужно скачать подробную тяжелую. На странице альбома это может занимать время. И еще браузер может не очень красиво отображать подобное масштабирование. (такой вариант не рекомендуемый)
Ну и что то типа такого для подвязки js:
| Код |
|---|
$(function() {
$('a.lightBox').lightBox();
}); |
Я лично предпочитаю fancybox и highslide для lightBox эффектов.
Кстате точно не скажу но в типовой конфигурации(в шаблонах поставляемых в дистрибутивах) вроде уже есть этот эффект анимации с fancybox. Хотя бы как пример для переделки под свой дизайн.
