1С-Битрикс Разработчикам - Вывод свойства инфоблока

Хочу вывести название элемента и дополнительное свойство, в данном случаи картинки.

Создали новый тип инфоблока, отключили древовидный классификатор, в инфоблоке добавили свойство элемента Файл (ADDITIONAL_IMAGES)
Через компонент Список новостей вывели
Получилось вот так
http://joxi.ru/Q2KB91QC8LB4mj

Код

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
<div class="news-list">
<?if($arParams["DISPLAY_TOP_PAGER"]):?>
   <?=$arResult["NAV_STRING"]?><br />
<?endif;?>
<?foreach($arResult["ITEMS"] as $arItem):?>
   <?
   $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
   $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
   ?>
   <p class="news-item" id="<?=$this->GetEditAreaId($arItem['ID']);?>">
      <?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
         <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
            <a href="<?=$arItem["DETAIL_PAGE_URL"]?>"><img
                  class="preview_picture"
                  border="0"
                  src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
                  width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>"
                  height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>"
                  alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"
                  title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"
                  style="float:left"
                  /></a>
         <?else:?>
            <img
               class="preview_picture"
               border="0"
               src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
               width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>"
               height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>"
               alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"
               title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"
               style="float:left"
               />
         <?endif;?>
      <?endif?>
      <?if($arParams["DISPLAY_DATE"]!="N" && $arItem["DISPLAY_ACTIVE_FROM"]):?>
         <span class="news-date-time"><?echo $arItem["DISPLAY_ACTIVE_FROM"]?></span>
      <?endif?>
      <?if($arParams["DISPLAY_NAME"]!="N" && $arItem["NAME"]):?>
         <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
            <a href="<?echo $arItem["DETAIL_PAGE_URL"]?>"><b><?echo $arItem["NAME"]?></b></a><br />
         <?else:?>
            <b><?echo $arItem["NAME"]?></b><br />
         <?endif;?>
      <?endif;?>
      <?if($arParams["DISPLAY_PREVIEW_TEXT"]!="N" && $arItem["PREVIEW_TEXT"]):?>
         <?echo $arItem["PREVIEW_TEXT"];?>
      <?endif;?>
      <?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
         <div style="clear:both"></div>
      <?endif?>
      <?foreach($arItem["FIELDS"] as $code=>$value):?>
         <small>
         <?=GetMessage("IBLOCK_FIELD_".$code)?>: <?=$value;?>
         </small><br />
      <?endforeach;?>
      <?foreach($arItem["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
         <small>
            <?if(is_array($arProperty["DISPLAY_VALUE"])):?>
            <?=implode(" / ", $arProperty["DISPLAY_VALUE"]);?>
         <?else:?>
            <?=$arProperty["DISPLAY_VALUE"];?>
         <?endif?>
         </small><br />
         <hr class="long">
 <br>
      <?endforeach;?>
   </p>
<?endforeach;?>
<?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
   <br /><?=$arResult["NAV_STRING"]?>
<?endif;?>
</div>

в коде я слабоват мягко говоря, судя по сайту к нему уже прикручен fancybox, получилось вывести картинки, но не как не пойму как сделать ссылку на открытие картинки при нажатии на превью картинки, не говоря о том почему уезжает название элемента вправо...
http://joxi.ru/ZrJ09kMH7wpP2j

Код

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$this->setFrameMode(true);
?>
<div class="news-list">
<?if($arParams["DISPLAY_TOP_PAGER"]):?>
   <?=$arResult["NAV_STRING"]?><br />
<?endif;?>
<?foreach($arResult["ITEMS"] as $arItem):?>
   <?
   $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
   $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
   ?>
   <p class="news-item" id="<?=$this->GetEditAreaId($arItem['ID']);?>">

<?if($arParams["DISPLAY_PICTURE"]!="N" && !empty($arItem["DISPLAY_PROPERTIES"]["ADDITIONAL_IMAGES"]["VALUE"])):?> 
                <?$arrImages = !is_array($arItem["DISPLAY_PROPERTIES"]["ADDITIONAL_IMAGES"]["VALUE"]) ? array($arItem["DISPLAY_PROPERTIES"]["ADDITIONAL_IMAGES"]["VALUE"]) : $arItem["DISPLAY_PROPERTIES"]["ADDITIONAL_IMAGES"]["VALUE"]; 
                foreach($arrImages as $imgID) { 
                        echo CFile::ShowImage($imgID, 100, 100, 'border="0" ";" ', $arItem["DETAIL_PAGE_URL"]); 

                } 
                ?> 
                <?endif?>




      <?if($arParams["DISPLAY_DATE"]!="N" && $arItem["DISPLAY_ACTIVE_FROM"]):?>
         <span class="news-date-time"><?echo $arItem["DISPLAY_ACTIVE_FROM"]?></span>
      <?endif?>
      <?if($arParams["DISPLAY_NAME"]!="N" && $arItem["NAME"]):?>
         <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
            <a href="<?echo $arItem["DETAIL_PAGE_URL"]?>"><b><?echo $arItem["NAME"]?></b></a><br />
         <?else:?>
            <b><?echo $arItem["NAME"]?></b><br />
         <?endif;?>
      <?endif;?>
      <?if($arParams["DISPLAY_PREVIEW_TEXT"]!="N" && $arItem["PREVIEW_TEXT"]):?>
         <?echo $arItem["PREVIEW_TEXT"];?>
      <?endif;?>

       <?if($arParams["DISPLAY_PICTURE"]!="N" && !empty($arItem["DISPLAY_PROPERTIES"]["ADDITIONAL_IMAGES"]["VALUE"])):?>
                        <div style="clear:both"></div>
                <?endif?>

      <?foreach($arItem["FIELDS"] as $code=>$value):?>
         <small>
         <?=GetMessage("IBLOCK_FIELD_".$code)?>: <?=$value;?>
         </small><br />
      <?endforeach;?>

      <?foreach($arItem["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
                        
                                <small>
                               
                                <?if($pid!="ADDITIONAL_IMAGES"):?>
                                                           <?if(is_array($arProperty["DISPLAY_VALUE"])):?>
                                        <?=implode(" / ", $arProperty["DISPLAY_VALUE"]);?>
                                <?else:?>
                                        <?=$arProperty["DISPLAY_VALUE"];?>
                                <?endif?>
                                </small><br />
                        <?endif;?>
                <?endforeach;?>
   </p>
<?endforeach;?>
<?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
   <br /><?=$arResult["NAV_STRING"]?>
<?endif;?>
</div>

Помогите разобраться с этой проблемкой, для меня проще и быстрее уже наверно было просто сверстать в html страницу, но как то это костыльно выглядит.

Вывод свойства инфоблока

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером