Смена главного изображения товара

[_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>
                    <? 
                  }

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

[laimas]

Нельзя JS скрипты помещать в цикл, вы их просто "размножаете".
Да, нужно менять src, но это временно для отображения на клиенте, а для реальной смены нужно изменять этот параметр на сервере.
И почему вывод главного тоже в цикле, их что тоже множество?

[_marisha]

laimas, спасибо что откликнулись.
"Да, нужно менять src, но это временно для отображения на клиенте" - нет случайно примера каким образом это сделать?
"И почему вывод главного тоже в цикле, их что тоже множество?" - не множество. Это стандартный функционал cms.

[laimas]

не множество. Это стандартный функционал cms

Ну так почему же вы в цикле его выводите причем с одного и того же массива? Откуда эти данные? Если это из базы, отсортируйте данные запроса так, чтобы главное изображение было в этом массиве первым, то есть если это какой-то признак в таблице, значит сортируйте по этому полю. А затем один цикл, в котором проверяя значение этого поля, выводите код главного фото, иначе это вывод кода остальных фото.

Вывод JS сценария после цикла, причем не обязательно в $(function(){ ... }), достаточно одного обработчика.

Можно и пример написать, но для этого нужно знать структуру данных входного массива, ибо ваших два цикла вывода, это никуда не годится.

[_marisha]

laimas, Ну так почему же вы в цикле его выводите причем с одного и того же массива? - это стандартный функционал cms. Как разработчики cms решили реализовать функционал, так он и есть )

При просмотре кода в главном изображении ссылки на изображение подставляются верные, также есть id элемента.
Пример главного изображения

<div class="product-item-detail-slider-image active" data-entity="image" data-id="527272">
                    <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/12d/12df2af2e5c16efc0a77e757f459fd76.jpeg?1535898042160977" alt="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;" title="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;" itemprop="image">
                  </div>

- это изображение первого фото

<div class="product-item-detail-slider-image" data-entity="image" data-id="532948">
                    <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/f95/f95fabeee85b209c6b04aab38098adeb.jpeg?1535954017383055" alt="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;" title="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;">
                  </div>

- это изображение второго фото (в миниатюре белое)

<div class="product-item-detail-slider-image" data-entity="image" data-id="532949">
                    <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/b9c/b9ce63003808a31d76c42ce226d42ffd.jpeg?1535954017327525" alt="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;" title="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;">
                  </div>

- это изображение 3 (в миниатюре зеленое)

Если просмотреть код миниатюры:
1)

<div class="product-item-detail-slider-controls-image active" data-entity="slider-control" data-value="18798_527272" data-id="527272">
                      <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/12d/12df2af2e5c16efc0a77e757f459fd76.jpeg?1535898042160977">
                    </div>

2)

<div class="product-item-detail-slider-controls-image" data-entity="slider-control" data-value="18798_532948" data-id="532948">
                      <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/f95/f95fabeee85b209c6b04aab38098adeb.jpeg?1535954017383055">
                    </div>

3)

<div class="product-item-detail-slider-controls-image" data-entity="slider-control" data-value="18798_532949" data-id="532949">
                      <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/b9c/b9ce63003808a31d76c42ce226d42ffd.jpeg?1535954017327525">
                    </div>

Первой полной картинке изначально добавляется класс active. Эксперимент: если вручную убрать класс active (product-item-detail-slider-image active) у первого главного изображения и добавить класс active второму главному изображению, то картинка главная меняется.

Вопрос: возможно ли сделать так, чтобы класс active добавлялся главному изображению при нажатии на соответствующую миниатюру? Может как-то возможно сопоставить по data-id?

[laimas]

Какой-то кошмар, ей богу. Ладно, пусть там кто-то написал эту муть, и сменить изображение/стиль, это не проблема. Но ведь это здесь меняется, а надо определить его для вывода на страницах, значит на сервер нужно передать некий параметр, который определяет изображение по умолчанию. Чем это определяется и передается ли уже такое на сервер?

[laimas]

А сам скрипт смены класса, это так:

<script>
var small = $(".product-item-detail-slider-controls-image:not(:first)").click(function(){
    small.removeClass("active"); //у большой картинки класс active всегда
    $(this).addClass("active");
})
</script>

Если при этом изменяется фото, значит какой-то обработчик уже есть.

[_marisha]

"нужно передать некий параметр, который определяет изображение по умолчанию" - по коду не наблюдаю никакого параметра.
Единственно, есть условие, при котором добавляется класс active и на основании данного условия отображается главное фото.
Пример:
Если вместо 0 поставить 2 ($key == 2), то главным изображением будет 3-яя миниатюра, т.е. зеленая.
Если убрать <?=($key == 0 ? ' active' : '')?>, то главное фото не отображается.

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>
                  <?
                }

Могу предоставить полный файл шаблона, могу предоставить ссылку на товар для наглядности.
Возможно что-то недопонимаю.., не специально.

[laimas]

Насколько можно понять из написанного, нет никакого главного изображения, а это некий слайдер на страницах, так? Тогда и передавать на сервер ничего не надо.

А $key, это просто индексы вложенных массивов массива $actualItem['MORE_PHOTO']. Если вы пишите, что при ручной смене индекса выбранная миниатюра отображается первой (большое фото), значит уже имеется или JS сценарий этого, или это решается средствами CSS.

Боксу большого изображения также назначается класс active, значит зачем же постоянно назначать, пусть будет всегда, а выбранной миниатюре назначаем как я показал. И этот скрипт должен выводиться один раз, после второго цикла.

[_marisha]

laimas,"Если при этом изменяется фото, значит какой-то обработчик уже есть" - фото не меняется.