Дополнительные картинки в списке элементов каталога битрикс

4429  |  6

Очень редко, но бывают ситуации, когда надо вывести дополнительные картинки в списке элементов инфоблока. Например в списке товаров торгового каталога интернет-магазина на битрикс. Данная заметка не относится к выводу картинок 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 скрипт, который позволит заменять основную картинку превьюшками при клике

<script type="text/javascript">
$(function() {
$('.thumbs<?=$arElement["ID"]?> a').click(function() {
$("#bigImg<?=$arElement['ID']?>").attr({src:$(this).attr('href')});
return false;
});
});
</script>

<?=$arElement['ID']?> - данный код подставит ID конкретного товара, так как он уникален для каждого из них

И, собственно, выводим большую картинку и ссылки на отресайзенные превью картинок. Саму превью уменьшаем до 30 пикселей в ширину а ее большую копию, которой будет заменяться основная картинка до 300 пикселей.

<a href="<?=$arElement["DETAIL_PAGE_URL"]?>">
<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. Надеюсь написал не очень сумбурно, с вопросами прошу в комментарии.

Расскажи друзьям-то:
Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей
Зарегистрироваться Войти Напомнить пароль
Или войти через социальную сеть:
Владмир
День добрый!
Хотелось бы еще узнать как вывести в шаблоне элемента изображения из множественного свойстсва?
Михаил Базаров
Цитата
Владмир пишет:
День добрый!
Хотелось бы еще узнать как вывести в шаблоне элемента изображения из множественного свойстсва?
Так это оно и есть. Множественное свойство типа ФАЙЛ-изображение
Гость сайта
Подходит ли этот метод для старого каталога 12 версии редакции стандарт?
Михаил Базаров
Цитата
Гость сайта пишет:
Подходит ли этот метод для старого каталога 12 версии редакции стандарт?
Для любой версии подходит
Гость сайта
Подскажите как вывести эти картинки в полноразмерном формате во всплывающем окне?
Guest
Михаил добрый день! С битриксом знаком совсем недавно, совсем новичок! Я извиняюсь за ту..... просмотрел много информации по поводу "обработки фото" не помогло. Задача заключается в том, что-бы при загрузке картинок они обрабатывались и устанавливался фиксированный размер (width,height) Использую на примере дополнительных фото (свойства) Но если загружаю картинки разного размера шаблон расходиться. (см.рис)
Если есть возможность подскажите в чем ошибка,заранее огромное спасибо!
Исходник:
Код
<div class="property-slider">
                <div id="property-images" class="flexslider">
                  <ul class="slides">
                    <?foreach($arResult["MORE_PHOTO"] as $PHOTO):?> 
               <li class="item"> <img src="<?=$PHOTO["SRC"]?>" alt=""> </li>
               <?endforeach?>
                  </ul>
                </div>
                <div id="property-thumbs" class="flexslider">
                  <ul class="slides">
              <?foreach($arResult["MORE_PHOTO"] as $PHOTO):?>
              <li class="item"> <img src="<?=$PHOTO["SRC"]?>" alt=""> </li>
              <?endforeach?>
                  </ul>
                </div>
</div>
 
Ваш код
Код
<a href="<?=$arElement["DETAIL_PAGE_URL"]?>"> 
<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>
сам код использования на сайте

Код
<div class="property-slider">
                <div id="property-images" class="flexslider">
                  <ul class="slides">
                    <?foreach($arResult["MORE_PHOTO"] as $PHOTO):?> 
               <? $renderfile = CFile::ResizeImageGet($PHOTO, array('width'=>300), BX_RESIZE_IMAGE_EXACT, true); ?> 
               <li class="item"> <img src="<?=$renderprewfile["src"]?>" alt=""> </li>
               <?endforeach?>
                  </ul>
                </div>
                <div id="property-thumbs" class="flexslider">
                  <ul class="slides">
              <?foreach($arResult["MORE_PHOTO"] as $PHOTO):?>
              <? $renderprewfile = CFile::ResizeImageGet($PHOTO, array('width'=>40, 'height'=>'34'), BX_RESIZE_IMAGE_EXACT, true); ?>
              <li class="item"> <img src="<?=$renderprewfile["src"]?>" alt=""> </li>
              <?endforeach?>
                  </ul>
                </div>
</div>
 

© 2011—2016 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.
Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

Информация размещенная на сайте, не является публичной офертой. Политика конфеденциальности
x
Как к Вам обращаться? *
Ваша электронная почта: *
Доп. материалы (логотип, тех. задание):
 
Обзор
Текст сообщения: