Как сделать, чтобы при выборе размеров «M», «L», «XL» или «XXL», менялась фотография товара?

Question

[Кристина]

Подскажите пожалуйста, как сделать, чтобы при выборе размеров «M», «L», «XL» или «XXL», менялась фотография товара?
(становилась меньшим размером)

Спасибо!

Answer 1

[imdeveloper]

Тут можно сделать по разному. Например :
1) У каждой кнопки с размером есть свой уникальный data атрибут (ex. data-size="m" , data-size="l" etc.)
У всех этих кнопок какой-то одинаковый класс, допустим "swatch". При нажатии на эту кнопку вы получаете через jQuery значение этого data атрибута
$('.swatch').data('size');
И далее проверяете в какое значение вы получили и на обыном css меняете высоту и ширину или просто знаение zoom

Второй вариант более правильный, но здесь уже нужна привязка к backend.
Те же кнопки, но при нажатии вы отпревляете ajax запрос и получаете нужное изображение или фото с новым размером.

Или храните картинки в data атрибутах и при нажатии получаете изображение которое задано в data и применяете к оснвному изображению