[_marisha]

Доброго времени суток!
В карточке товара выводятся дополнительные фото (MORE_PHOTO) под главным изображением (скрин 1)
Необходимо, чтобы при нажатии на доп фото производилась смена главного изображения на выбранное.
Подскажите, пожалуйста, каким образом возможно сделать? Может есть примеры? Спасибо.

Здесь происходит вывод главного изображения:

foreach ($actualItem['MORE_PHOTO'] as $key => $photo)
                {?>                   
                  <div class="product-item-detail-slider-image<?=($key == 0 ? ' active' : '')?>" data-entity="image" data-id="<?=$photo['ID']?>" id="<?=$photo['ID']?>">
                    <img src="<?=$photo['SRC']?>" alt="<?=$alt?>" title="<?=$title?>"<?=($key == 0 ? ' itemprop="image"' : '')?> id="<?=$photo['ID']?>">
                  </div>
                  <?
                }

Ниже в шаблоне catalog.element происходит вывод дополнительных фото:

foreach ($offer['MORE_PHOTO'] as $keyPhoto => $photo)
                  {
                    ?><!--Доп фото-->
                    <!--Добавление класса active-->
                    <script>
                      $(function(){
                        $(".product-item-detail-slider-controls-image").click(function(){
                        $(".product-item-detail-slider-controls-image").removeClass("active");
                        $(this).addClass("active");
                      });});
                    </script>
                    <!--Добавление класса active конец-->
                    <!--Доп фото конец-->
                    <div class="product-item-detail-slider-controls-image<?=($keyPhoto == 0 ? ' active' : '')?>"
                      data-entity="slider-control" data-value="<?=$offer['ID'].'_'.$photo['ID']?>" data-id="<?=$photo['ID']?>">
                      <img src="<?=$photo['SRC']?>">
                    </div>
                    <? 
                  }

Если верно понимаю, то необходимо заменить путь изображения главного фото на путь доп фото, но каким образом это сделать, затрудняюсь...