Смена изображения при клике (при использовании picture и srcset)?

Question

[Евгений]

Здравствуйте!



Вот такая галерея.
Изображение в большом блоке (1) должно меняться при клике на другое и обратно по второму клику, назовем это "до/после".
А по нажатию на маленькие блоки (2, 3, 4), контент большого блока (1) должен меняться на другой проект, в котором то же два изображения "до/после", сменяющие себя при клике на них.

Все бы ничего, но изображение в большом блоке (1) вставлено как:

<picture>
<source media="(max-width: 550px)" srcset="https://via.placeholder.com/500x300">
<source media="(max-width: 650px)" srcset="https://via.placeholder.com/1300x600">	
<source media="(max-width: 850px)" srcset="https://via.placeholder.com/1300x600">			
<source media="(max-width: 1000px)" srcset="https://via.placeholder.com/1300x600">
<source media="(max-width: 1400px)" srcset="https://via.placeholder.com/1300x700">  					
<img src="https://via.placeholder.com/1300x700" alt="">
</picture>

если это сделать через

onclick="imgsrc(this)"

function imgsrc(img) {
  if ($(img).attr("src") == "https://via.placeholder.com/1300x700")
    $(img).attr("src", "https://via.placeholder.com/100x100");
  else
    $(img).attr("src", "https://via.placeholder.com/1300x700");
}

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

И еще вопрос, если мы через js меняем все содержимое , то выберет ли браузер нужное разрешение изображения без перезагрузки страницы?

Comments

[Ankhena]

addEventListener
и меняйте классы для picture, а не меняйте атрибуты в js.

Answer 1

[Антон Муравьев]

Обязательно ли использовать <source> ? Ведь можно намного проще это сделать на <img src="" alt="">. Тем не менее хочу Вас ознакомить с моим решением данной задачи - тык

Comments

[Антон Муравьев]

Так же могу порекомендовать просто обращаться к классам объектов и менять там значение, отвечающее за картинку заднего фона

[Евгений]

Антон Муравьев,
Проще... но как быть с адаптивными изображениями?
Нужно, чтобы на мониторе загружалась большая картинка, на мобильном маленькая. Это должны быть именно <img>, поэтому через background css не пойдет. Было решено сделать через <source>.