Иногда нужно в карточке товара выводить фото товара и дополнительные фото (галерея)

В инфоблоке товара добавляем свойства названием MORE_PHOTO типа свойства выберем файл (если нет такого)

В шаблоне карточке товара /local/templates/НАЗВАНИЕ_ШАБЛОНА_САЙТА/components/bitrix/catalog/НАЗВАНИЕ_ШАБЛОНА_КОМПОНЕНТА/bitrix/catalog.element/.default/template.php
ну или место /local/ у Вас может быть /bitrix/

Пишем следующий код, который циклом выводит фото из свойства MORE_PHOTO через функцию CFile::ResizeImageGet изменяем размеры превью картинок


<div class="product-images">

< ? //основная фото товара?>

<div id="main-image" class="product-image">

<img src="< ? echo $arResult['DETAIL_PICTURE']['SRC']?>" alt="<?echo $strAlt?>" title="<?echo $strTitle?>">

</div>


<? //Дополнительные фото товара (галерея)?>

< ? if(!empty($arResult['MORE_PHOTO'])):?>
<div class="product-gallery">

<a class="gallery-image" href="<? echo $arResult['DETAIL_PICTURE']['SRC']?>">
<img src="<? echo $arResult['DETAIL_PICTURE']['SRC']?>">
</a>

< ? foreach($arResult['MORE_PHOTO'] as $img):?>

< ? $thumb  = CFile::ResizeImageGet($img, Array("width" => 110, "height" => 110) );?>

<a class="gallery-image" href="<? echo $img['SRC']?>"><img src="<? echo $thumb['src']?>"></a>

< ? endforeach?>

</div>

< ? endif ?> 

</div>


CSS

.product-gallery {

    width: 100%;
    float: left;

}

.product-gallery .gallery-image {

    display: block;
    width: 105px;
    float: left;
    margin-right: 10px;
    text-align: center;
}



JS - Jquery для переключение фото (изначально у вас должен быть подключен Jquer)

$(document).ready(function(){

$('.product-gallery a').click(function(e){

var img  = $(this).attr("href");

$("#main-image img").attr("src", img );

e.preventDefault();

return false;

});

});