@Evgeniuster

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

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

5e79bc733d5e6587513505.jpeg

Вот такая галерея.
Изображение в большом блоке (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 меняем все содержимое , то выберет ли браузер нужное разрешение изображения без перезагрузки страницы?
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ответы на вопрос 1
Обязательно ли использовать <source> ? Ведь можно намного проще это сделать на <img src="" alt="">. Тем не менее хочу Вас ознакомить с моим решением данной задачи - тык
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы