Как правильно верстаются фотографии в карточке товара?

Question

[WebmasterOffice]

Добрый вечер!

Подскажите, пожалуйста, как реализовать выбор фотографий на этом скрине? При клике фотография попадает в большой квадрат, затем уже еще раз по клику увеличивается.

Comments

[Алекс Глебов]

слайдер с thumbs
https://swiperjs.com/demos#thumbs-gallery
+ галерея
https://www.lightgalleryjs.com/

Answer 1

[godsplan]

При клике на маленькую фотку брать ее src и подставлять в большую фотку. А открытие через какой нибудь фансибокс или ручками

Answer 2

[MeMoJlor]

По поводу изменения уже ответили. Давайте отвечу как увеличить.
Функция, фиксирует клик и выполняет на первый и второй клик разные задачи:

img.addEventListiner('click', () => {
  let i = 0;
  i++;
 if(i==1){
 поменять url картинки
 } else if (i==2){
 навесить класс на картинку, чтобы она увеличилась на весь экран с position: fixed
 i=0;
 }
})

Comments

[Алексей Дубровин]

Странно что это отмечено как решение, хотя этот код не работает) Перед отправкой стоит проверять код.

Answer 3

[Antony Bark]

Без JS, чистый CSS https://codepen.io/tolfy/pen/KKvdZzZ