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

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

Посоветовали мне тут попробовать бесплатную панель управления...

SEO новинки в 14-ой версии Битрикс

Дошли руки до изучения новинок появившихся в 14-ой версии битрикса....

Дополнительные параметры в меню Битрикс

Иногда нужно присвоить какой-то функционал к конкретному пункту...

Сортировать товары по названию, цене и дате поступления в каталоге Битрикс

Достаточно часто заказчик просит вывести сортировку по цене,...

Материалы по теме в новостях Битрикс, с картинкой, названием и текстом анонса.

Расскажу как вывести материалы по теме в новостях Битрикс, с...

Валидация пароля и подтверждения при регистрации в битрикс

Встала задачка сделать валидацию пароля и его подтверждения ...

Свежие комментарии в блоге
Всплывающее окно с формой обратной связи Битрикс

Подскажите почему может не работать скрипт  BX.ajax.onload_943827 = function() {           setTime...

19.07.2017 / Рима Уколова
Вывести товары из того же раздела в карточке товара

Михаил, скажите пожалуйста, этот метод еще актуален? Никак не могу передать ни id ни символьный код,...

19.07.2017 / Алексей Сель
Панель управления хостином VESTA и 1С Битрикс, базовая оптимизация

Здравствуйте, Михаил. Постоянно вылетает ошибка БД при создании рез.копии битрикс. Создавал виртуалк...

14.07.2017 / Сергей Стефанович
Как вывести свойства инфоблока по отдельности и немного плюшек не в тему

Здравствуйте, хочу вывести цену отдельно от общего списка свойств, использую  [CODE] 11.07.2017 / Алексей Сель

© 2011—2017 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.

Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

Информация размещенная на сайте, не является публичной офертой. Политика конфеденциальности

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

Нажимая на кнопку "Отправить", Вы соглашаетесь на обработку Ваших персональных данных согласно политике конфеденциальности. Ознакомиться с которой, можно в нижнем правом углу сайта