Очень редко, но бывают ситуации, когда надо вывести дополнительные картинки в списке элементов инфоблока. Например в списке товаров торгового каталога интернет-магазина на битрикс. Данная заметка не относится к выводу картинок SKU предложений товара. Только к одиночным товарам.
В качестве примера: Нам нужно вывести дополнительные картинки товара в которых отображаются доступные цвета. При этом при клике на превью, оно должно заменять собой большую картинку.
Создаем множественное свойство типа файл
Для начала создаем множественное свойство типа файл в инфоблоке нашего каталога. Дадим ему код TSVETS и выведем в нашем каталоге для списка товаров:
И накидаем картинок для какого-нибудь товара:
Добавляем в шаблон
Далее открываем на редактирование template.php шаблона catalog.section нашего каталога и добавляем следующий код:
$arElement["TSVETS"] = array();
if(isset($arElement["PROPERTIES"]["TSVETS"]["VALUE"]) && is_array($arElement["PROPERTIES"]["TSVETS"]["VALUE"]))
{
foreach($arElement["PROPERTIES"]["TSVETS"]["VALUE"] as $FILE)
{
$FILE = CFile::GetFileArray($FILE);
if(is_array($FILE))
$arElement["TSVETS"][]=$FILE;
}
}
$renderZad = CFile::ResizeImageGet($arElement["PREVIEW_PICTURE"], Array("width" => 290), BX_RESIZE_IMAGE_EXACT, false);
?>
Данный код позволяет нам обратиться к свойству типа файл TSVETS и отрезайзит детальную картинку до размера 300 пиксей в ширину если исходная картинка очень большая, что разгрузит нагрузку на трафик нашего списка товаров.
Далее подключаем js скрипт который позволит заменять основную картинку превьюшками при клике
$(function() {
$('.thumbs<?=$arElement["ID"]?> a').click(function() {
$("#bigImg<?=$arElement['ID']?>").attr({src:$(this).attr('href')});
return false;
});
});
</script>
<?=$arElement['ID']?> - данный код подставит ID конкретного товара, так как он уникален для каждого из них
И собственно, выводим большую картинку и ссылки на отресайзенные превью картинок. Саму превью уменьшаем до 30 пикселей в ширину а ее большую копию, которой будет заменяться основная картинка до 300-сот.
<div class="img">
<img src="<?echo $renderPered["src"]?>" id="bigImg<?=$arElement["ID"]?>"/>
</div>
</a>
<div class="smalls thumbs<?=$arElement["ID"]?>">
<?
$LINE_ELEMENT_COUNT = 2; //выводим картинки
if(count($arElement["TSVETS"])>0):
?>
<?foreach($arElement["TSVETS"] as $PHOTO):?>
<? $renderfile = CFile::ResizeImageGet($PHOTO, array('width'=>300), BX_RESIZE_IMAGE_EXACT, true); ?>
<? $renderprewfile = CFile::ResizeImageGet($PHOTO, array('width'=>40, 'height'=>'34'), BX_RESIZE_IMAGE_EXACT, true); ?>
<div class="its">
<a href="<?=$renderfile["src"]?>">
<img src="<?=$renderprewfile["src"]?>"/>
</a>
</div>
<?endforeach?>
<?endif?>
</div>
В общем-то все. Данным методом можно выводить и дополнительные картинки в списке новостей Битрикс не забывая заменить arElement на arItem. Надеюсь написал не очень сумбурно, с вопросами прошу в комментарии.
