Измените изображение на клик на другое изображение, но используйте функцию srcset (необязательно jquery)

Question

Я хочу изменить изображение onclick на другое изображение, но не только хочу изменить фиксированное изображение, но и использовать преимущества srcset, поэтому браузер выбирает правильное изображение для текущего размера основного изображения (отзывчивый макет).

Это то, что я использую сейчас, ваниль:

<div id="item-detail-img-main"> 
 
    <img src="/_img/items/400/img.jpg" srcset="/_img/items/400/img.jpg 400w, /_img/items/600/img.jpg 600w" alt="" width="100%" id="item-detail-img-main-img"> 
 
</div> 
 
<script type="text/javascript"> 
 
function chimg (img) { 
 
    window.document.images["item-detail-img-main-img"].src = img; 
 
} 
 
</script> 
 
<ul id="item-detail-img-thumbs"> 
 
    <li><img src="/_img/items/200/img.jpg" onclick="chimg('/_img/items/400/img.jpg')"></li> 
 
    <li><img src="/_img/items/200/img2.jpg" onclick="chimg('/_img/items/400/img2.jpg')"></li> 
 
</ul>

Я открыт для JQuery здесь.

Кто-нибудь знает, как с этим справиться?

Answer 1

Я думаю, вы можете установить атрибут srcset, по крайней мере, используя метод setAttribute(). Кроме того, можно просто заменить весь тег изображения:

function(img,img2,img3){ 
    document.getElementById('item-detail-img-main').innerHTML='<img src="'+img+'" srcset="'+img2+' 400w, '+img3+' 600w" alt="" width="100%" id="item-detail-img-main-img">'; 
} 

Answer 2

Опция JQuery выглядит примерно так:

https://jsfiddle.net/axcnotx7/

<div> 
    <img id="main" width="100%" id="item-detail-img-main-img"> 
</div> 
<ul id="thumbs"> 
    <li><img src="https://icons.iconarchive.com/icons/fi3ur/fruitsalad/256/banana-icon.png"></li> 
    <li><img src="https://icons.iconarchive.com/icons/bingxueling/fruit-vegetables/256/apple-red-icon.png"></li> 
</ul> 
<script type="text/javascript"> 
    var main = $('img#main'); 
    $('#thumbs img').click(function(e) { 
     var imageSrc = e.currentTarget.src; 
     // You need to determine your own srcset paths here 
     var srcSet = imageSrc + ' 400w, ' + imageSrc + ' 600w'; 
     main.attr('src', imageSrc); 
     main.attr('srcset', srcSet); 
    }); 
</script>