Смена главного изображения товара
Вложений: 1
Доброго времени суток!
В карточке товара выводятся дополнительные фото (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>
<?
}
Если верно понимаю, то необходимо заменить путь изображения главного фото на путь доп фото, но каким образом это сделать, затрудняюсь... |
Нельзя JS скрипты помещать в цикл, вы их просто "размножаете".
Да, нужно менять src, но это временно для отображения на клиенте, а для реальной смены нужно изменять этот параметр на сервере. И почему вывод главного тоже в цикле, их что тоже множество? |
laimas, спасибо что откликнулись.
"Да, нужно менять src, но это временно для отображения на клиенте" - нет случайно примера каким образом это сделать? "И почему вывод главного тоже в цикле, их что тоже множество?" - не множество. Это стандартный функционал cms. |
Цитата:
Вывод JS сценария после цикла, причем не обязательно в $(function(){ ... }), достаточно одного обработчика. Можно и пример написать, но для этого нужно знать структуру данных входного массива, ибо ваших два цикла вывода, это никуда не годится. |
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=""Атлас стрейч одн."Жара""" title=""Атлас стрейч одн."Жара""" 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=""Атлас стрейч одн."Жара""" title=""Атлас стрейч одн."Жара""">
</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=""Атлас стрейч одн."Жара""" title=""Атлас стрейч одн."Жара""">
</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? |
Какой-то кошмар, ей богу. Ладно, пусть там кто-то написал эту муть, и сменить изображение/стиль, это не проблема. Но ведь это здесь меняется, а надо определить его для вывода на страницах, значит на сервер нужно передать некий параметр, который определяет изображение по умолчанию. Чем это определяется и передается ли уже такое на сервер?
|
А сам скрипт смены класса, это так:
<script>
var small = $(".product-item-detail-slider-controls-image:not(:first)").click(function(){
small.removeClass("active"); //у большой картинки класс active всегда
$(this).addClass("active");
})
</script>
Если при этом изменяется фото, значит какой-то обработчик уже есть. |
"нужно передать некий параметр, который определяет изображение по умолчанию" - по коду не наблюдаю никакого параметра.
Единственно, есть условие, при котором добавляется класс 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>
<?
}
Могу предоставить полный файл шаблона, могу предоставить ссылку на товар для наглядности. Возможно что-то недопонимаю.., не специально. |
Насколько можно понять из написанного, нет никакого главного изображения, а это некий слайдер на страницах, так? Тогда и передавать на сервер ничего не надо.
А $key, это просто индексы вложенных массивов массива $actualItem['MORE_PHOTO']. Если вы пишите, что при ручной смене индекса выбранная миниатюра отображается первой (большое фото), значит уже имеется или JS сценарий этого, или это решается средствами CSS. Боксу большого изображения также назначается класс active, значит зачем же постоянно назначать, пусть будет всегда, а выбранной миниатюре назначаем как я показал. И этот скрипт должен выводиться один раз, после второго цикла. |
laimas,"Если при этом изменяется фото, значит какой-то обработчик уже есть" - фото не меняется.
|
А как же это?
Цитата:
|
Попытка вангования
<style>
.product-item-detail-slider-image {
display:none;
width:300px;
height:100px;
overflow:hidden;
}
.product-item-detail-slider-controls-image {
display:inline-block;
width:30px;
height:30px;
overflow:hidden;
}
.active {
display:inline-block;
border:2px solid green;
}
</style>
<div>
<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=""Атлас стрейч одн."Жара""" title=""Атлас стрейч одн."Жара""" 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=""Атлас стрейч одн."Жара""" title=""Атлас стрейч одн."Жара""">
</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=""Атлас стрейч одн."Жара""" title=""Атлас стрейч одн."Жара""">
</div>
</div>
<div>
<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>
<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>
<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>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var big = $(".product-item-detail-slider-image");
var small = $(".product-item-detail-slider-controls-image").click(function(){
small.removeClass("active");
$(this).addClass("active");
big.removeClass("active");
$(".product-item-detail-slider-image[data-id=" + $(this).data('id') +"]").addClass("active");
})
</script>
|
laimas, "первое "главное", это большое фото" - главное это большое фото (которое в рамке :) Например: скрин 2 - главное фото розовое, скрин 4 - главное фото белое)
При просмотре кода есть ссылка на большое фото, которое становится главным (т.е. в рамку) если есть класс active Скрин 2 - ссылка на большое фото, а также класс active Скрин 3 - ссылка на большое фото, а класса active нет Скрин 4 - у розового фото убираем класс active и добавляем класс active белому большому фото. После чего фото становится главным, т.е. в рамке. |
Вложений: 3
Скрины во вложении
|
_marisha, нет у вас никаких главных фото, от этого термина кроме путаницы ничего. Главное или фото по умолчанию, это параметр, который определяет фото по умолчанию при выводе списка товаров (не в карточке товара).
У вас же обычный слайдер и щелчком по миниатюре она отображается увеличенной. И судя по тому что вы писали ранее, а также по классам элементов на представленных фото, код и CSS слайдера у вас уже есть. Если сейчас вам писать примеры и вы их реализуете, то возможны путаница или конфликты. Поэтому нужно просто проанализировать имеющееся и выполнить код согласно описанию вашего слайдера. Я так думаю. |
| Часовой пояс GMT +3, время: 09:41. |