Как реализовать отображение фото зависящее от нескольких radio кнопок?

Question

[Elvizlir]

Всем доброго времени суток! Встал очень интересный вопрос. Заказчик хочет, что бы при выборе размера и цвета появлялось соответствующее фото и предоставил 24 фотографии(по 3 размера каждого цвета). Проблема в том, что я абсолютно не имею понятия как это сделать. Сперва думал, что будет легче поверх наложить svg и скейлить фото при выборе размера. Но выходит не очень. В js я не сильно силён, так что прошу помощи

Comments

[Froggyweb]

начнем с общего вкусный букет - это его можно съесть? если так иллюстрация - говно, если не - заголовок - говно.
очень тупой подход, хотя и местами универсальный правильно обозвать фото, например standart_size1_red это позволит относительно просто менять фотки. если svg - можно менять цвет элементов от выбора ,параметров, можно элементам svg добавлять видимость по классу\

но букет из svg картинок я бы точно не купил.

[Elvizlir]

Froggyweb, Сьесть можно, там похоже просто мармелада в красивую упаковку пихают. А можно чуть по подробнее о названии фото? Как в таком случае отслеживать изменение и обращаться к нужной?

[Froggyweb]

Elvizlir, просто мармелада в красивую упаковку пихают.
судя по фотке это не видно

ну можно привязать название фоток к форме

например, название_коллекции-xxl-pink
что означает выбор коллекции,---размер букета--цвет
соответственно можно по форме вывести форму, но фоток будет много, кто их будет делать - вопрос

справа у тебя форма отправляет парметры size - color они подставляются в имя jpg

[Elvizlir]

Froggyweb, Ну к сожалению, не я дизайнер и не я всё это выбирал. Могу тупить, не очень в js. То есть мы даём атрибут типа data-size\data-color, подхватываем изменение одной из радио кнопок и из атрибутов составляем путь до фотки, верно?

P.S. Все 24 варианта фоток заказчик прикрепил, так что с вариативностью нет проблем

Answer 1

[Артур]

проименную картинки. Пример, как в комментах: size_color.png [small_purple.png с фото в вопросе например]
через jquery меняй attr у картинки.

// предположительно получены по кликам выбора
let color = "purple",
size = "small";

function newImggen(){
//var whatNow = $(".blockImg").attr('src'),
gen = "/img/"+size+"_"+color+".png";

$(".blockImg").attr('src', gen);

}

посмотри что в коде вызывается по кликам на выборные кнопки и в этой части вызови функцию newImggen();